规定元素的 id、宽度和高度:
<canvas id="myCanvas" width="200" height="100"></canvas>
JavaScript 使用 id 来寻找 canvas 元素:
var c=document.getElementById("myCanvas");然后,创建 context 对象:
var cxt=c.getContext("2d");cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75);fillStyle 方法将其染成红色,fillRect 方法规定了形状、位置和尺寸。
理解坐标
上面的 fillRect 方法拥有参数 (0,0,150,75)。
意思是:在画布上绘制 150x75 的矩形,从左上角开始 (0,0)。
如下图所示,画布的 X 和 Y 坐标用于在画布上对绘画进行定位。
最基本的一个图案就完成了
cxt.moveTo(10,10);//先保存一个点 cxt.lineTo(150,50);//下一个点经过这里,会连接这个点 cxt.lineTo(10,50);下一个点经过这里,会连接这个店 cxt.stroke();//把此图案绘制到画布上beginPath()是重新开始新路径,而把之前的路径都清空掉
closePath的意思不是结束路径,而是 关闭 路径,它会试图从当前路径的终点连一条路径到起点,让整个路径闭合起来。
- context.arc(x,y,radius,a,b,anclockwise)
- x : 起始点横坐标
- y : 起始点纵坐标
- radius : 半径
- a : 开始角度
- b : 结束角度
- anticlockwise : 是否逆时针
但是,这并不意味着它之后的路径就是新路径了!
总而言之,就是 不要企图通过闭合现有路径来开始一条新路径 ,而开始一条新路径,以前的路径也不会闭合。
var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var img=new Image() img.src="IMG_3326.png" img.οnlοad=function(){ cxt.drawImage(img,-20,-20); }
放图案的话,一定要弄个事件