canvas是HTML5中的新功能,它是一块,在你开辟的空间内部用代码画图。
而建立画布和画图是需要一些步骤的
canvas是布 context是各种笔
先看一个简单的代码
<canvas id="canvas2d" width="150" height="150">
浏览器不支持canvas
</canvas>
<script type="text/javascript">
var canvas=document.getElementById("canvas2d");//获取我们的画布。
var ctx2d=canvas.getContext("2d");//画布中的内容获取,然后设为对象,我们可以对他进行操作。
ctx2d.fillRect(30,50,100,50);
ctx2d.strokeRect(100,30,100,50);
ctx2d.clearRect(101,51,28,28);//画了两个矩形,然后清除了交融部分。
</script>
每一个我们要进行的canvas操作都必须有获取画布,和获取画布内容的操作。
然后还有一个问题就是,我们要预防老版本浏览器不支持canvas,所以要写一个if语句进行一下判断
<canvas id="canvas2d" width="150" height="150">
浏览器不支持canvas
</canvas>
<script type="text/javascript">
var canvas=document.getElementById("canvas2d");
if(canvas.getContext)
{
var ctx2d=canvas.getContext("2d");
ctx2d.fillRect(30,50,100,50);
ctx2d.strokeRect(100,30,100,50);
ctx2d.clearRect(101,51,28,28);
}
</script>
getContext()中我们写的是2d是因为我们要画一个2d的平面图形。(当然还有3d的选项)
一.绘制矩形:
简单的代码就在上面有给出,然后这里体现了三个方法:
strokeRect(x,y,width,height):绘制矩形边框。
fillRect(x,y,width,height);绘制矩形并且填充。
clearRect(x,y,width,height);清除矩形区域的内容,其实是露出背景色。
x,y代表的是坐标,注意,这里的坐标是指canvas画布为平面的左上角为原点的坐标。width,height也就是所画矩形的宽和高。
二.绘制其他图形:
绘制其他图形需要一些其他流程,就像我们画画的时候,我们需要提笔,找位置,落笔开始画,收笔。
所以在canvas上面画的时候也需要这些步骤。
首先介绍一下这些步骤的代码:
<canvas id="canvas2d" width="150" height="150">
浏览器不支持canvas
</canvas>
<script type="text/javascript">
var canvas=document.getElementById("canvas2d");
var ctx2d=canvas.getContext("2d");
//第一种方法开辟路径:
ctx2d.beginPath();//开辟一条新路径,也就是提笔一样的步骤;
ctx2d.moveTo();//把画笔移动,也就是找个位置的步骤,然后落笔于此。
//......假设我们干了一堆事,画了点东西。
ctx2d.closePath();//收笔的过程,停止画了
ctx2d.fill();//这是对所画路径的操作,即填充。
ctx2d.stroke();//这是对所画路径的另一种操作,即描边。描边和填充不是必要的,但是最好干这些事,会好看一些,也方便可视化。下面的方法也可以描边和填充。
//第二种方法开辟路径:
var newPath=new Path2d();
//.......我们干了很多事
newPath.closePath();//同样也是关闭路径的收笔操作。
</script>
好了,接下来是利用我们开辟的路径去画图形的操作。
1.我们画直线
画直线的方法是lineTo(x,y);一般会与moveTo();配合使用,另外还有画虚线的办法setLineDash();还有一个设置虚线偏移量的方法lineDashOffset();
<canvas id="canvas2d" width="150" height="150">
浏览器不支持canvas
</canvas>
<script type="text/javascript">
var canvas=document.getElementById("canvas2d");
if(canvas.getContext)
{
var ctx2d=canvas.getContext("2d");
for(var i=1;i<10;i++)
{
ctx.beginPath();
ctx.lineWidth=i;//设置线宽;
ctx.moveTo(10,10*i);//移笔
ctx.lineTo(100,10*i);//画线
ctx.stroke();//描边
}//画了9条粗度逐渐增加的实线
ctx.beginPath();
ctx.lineWidth=1;
ctx.setLineDash([5,10]);//5长的实线,10宽的空白,然后就这么循环的画线;
ctx.moveTo(10,110);
ctx.lineTo(300,110);
ctx.stroke();
ctx.beginPath();
ctx.lineWidth=1;
ctx.setLineDash([5,10,15]);//5长的实线,10宽的空白,15宽的实线,然后其实会是5宽的空白,然后10宽的实线。。。。。。然后就这么循环的画线;
ctx.moveTo(10,110);
ctx.lineTo(300,110);
ctx.stroke();
for(var i=1;i<10;i++)
{
ctx.beginPath();
ctx.setLineDash([5,10]);
ctx.lineDashOffset=i;//设置偏移量
ctx.moveTo(10,10*i);
ctx.lineTo(100,10*i);
ctx.stroke();
}
}
</script>
2.我们画曲线
首先画圆弧:
有两种方法:arc(x,y,radius,startAngle,endAngle,anticlockwise);//正常画法
arcTo(x1,y1,x2,y2,radius);//通过两个切线找到与两切线相切的相应半径的圆
应该很好理解每一个参数的意思,通过英语就能明白,anticlockwise表示石佛偶逆时针绘制,默认顺时针。
代码就不写了,和直线写法一样,
现在来看贝塞尔曲线,会用的就用吧,反正我就是试着用的那种。
quadraticCurveTo(cp1x,cp1y,x,y);
bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
x,y为曲线的终点,cp1,cp2的那两个坐标都是控制点,还是跟直线的写法一样,不写代码了。