获取画布对象
Your browserdoes not support the canvas element.
咱们就开始动手画画玩！首先得找画画儿的地方在哪——其实就是HTML5 Canvas。有两个方法可以找出来：一是用简单的document.getElementById()；另一种就是用其他简便的方法。然后，找到画布后，用getContext()拿走二维画笔。别忘了，要选的就是getContext()里的那“2d”，选其他的话可不行。这样，我们就能拿到HTML5的小助手Context了，里面都是各种各样的绘画和调色板技巧，快去发掘它们！
var canvas = document.getElementById(“canvas”); var context2D = canvas.getContext(“2d”);
绘制文本
上学时肯定教过在画布上写字对？方法很简单！只需要四个参数：想写什么字、从哪里开始写以及字的大小。想让字体特别好看的话，调一下Context的font属性就ok，通常情况下默认为“10像素无衬线体”。
绘制基本图形
首先，你得学会使用Context里头的几个小工具，比如moveTo(), lineTo()来画个框，再用rect()和arc()帮这个框上色或加粗线哈。不过别忘了，最后得用closePath()收尾，可这并不是真正意义上的删除，只是关闭这条路而已。rect()就是用来画矩形的，而arc()则是给圆弧添色彩。
Your browserdoes not support the canvas element!
window.onload = function() {
var canvas =document.getElementById("canvas");
var context2D =canvas.getContext("2d");
context2D.font ="35px Times New Roman";
context2D.fillText("HelloCanvas!", canvas.width / 2, canvas.height / 2);
}
贝塞尔曲线与路径填充
搞定基础图样后，就可以请 quadraticCurveTo()和 bezierCurveTo()出场打造酷炫的贝塞尔曲线。记得画好线尾找 Context 的 fill()和 stroke()兄弟给你上颜色和描绘线条。或者直接用clip()裁剪个小框，就不怕画出来的形状影响外面的空间。
线条与填充样式
告诉你个小技巧，Canvas上那个叫做“Context”的按钮比魔法棒还厉害，能随心所欲地改变线条和颜色，就像玩堆积木那么简单，只需轻轻一点，就能让线条和色彩变幻无穷；它们默认都是黑色的#000000。再说说lineCap这个词儿，它可厉害了，其实就是控制线条边缘形状的开关，想做圆角、方角还是切线，都随你心意，如果不选的话，那就只好是直角咯。最后提醒下，画漂亮的线段交叉效果？别急，只用调整下lineJoin就好，是不是非常方便！
直接绘制图形
Canvas里面住着几个特别好玩的小朋友，他们不拘泥于常规画法，居然还能用其他方法画矩形！fillRect()大显神通，一口气儿涂满整个长方形；strokeRect()闪亮登场，帮你勾勒出闪烁的白边；最后 From clearRect()，他直接用手指轻轻一擦，矩形里的图案瞬间消失无踪。简单又实用，根本不需要学习什么高深的路径知识，上来就能随便玩！所以说，Canvas真的超级有魅力！
图片绘制
悄悄告诉你个好玩的事儿！在JavaScript的Context对象里面，有个叫drawImage()的方法，可以把任何图像元素（包括HTMLImageElement, HTMLCanvasElement或者是HTMLVideoElement）轻易地塞进Canvas上。只需要告诉程序这个图像要跑到哪里停下来，大小又是多少，立刻就可以欣赏成果！
亲们，这儿有HTML5Canvas作画基础教程，只需照着下面的步骤走，就能画出美美的画喔！
Your browserdoes not support the canvas element!
window.onload = function() {
var canvas =document.getElementById("canvas");
var context2D =canvas.getContext("2d");
//绘制相交的线段
context2D.beginPath();
context2D.moveTo(50,50);
context2D.lineTo(100,100);
context2D.moveTo(200,50);
context2D.lineTo(100,100);
context2D.stroke();
//绘制与这两条线段相切的红色圆弧
context2D.beginPath();
context2D.strokeStyle= "#ff0000";
context2D.moveTo(50,50);
context2D.arcTo(100,100, 200, 50, 100);
context2D.stroke();
//绘制一个蓝色的圆
context2D.beginPath();
context2D.strokeStyle= "#0000ff";
context2D.arc(300,250, 100, 0, Math.PI * 2, false);
context2D.stroke();
//将上面的圆填充为灰色
context2D.fillStyle ="#a3a3a3";
context2D.fill();
//在上面的圆中剪辑一个圆形方形区域
context2D.beginPath();
context2D.rect(250,200, 100, 100);
context2D.clip();
//在剪辑区域中填充一个大于该区域尺寸的矩形
context2D.fillStyle ="yellow";
context2D.fillRect(0,0, 400, 400);
}
。
评论0