给大家介绍一种有意思的画布,那就是h5的画布canvas
(1)canvas元素
width、height 和style 里面的width、height一样么?
如果直接设置canvas的width和height :画布和元素的宽度都是你设置的值。
如果设置的Style里面的width和height,它仅表示canvas元素占文档流的位置。这时候画布的宽度和高度是默认值。分别是600、300.
注意:
(1)设置canvas的宽度的,直接操作canvas的width和height属性。如果需要放大canvas画布,设置的CSS width和height应该和canvas width、height属性值,比例保持一致,说白了就是等比缩放。
(2)canvas元素是 行内元素
(2)坐标系
坐标的原点是在 左上角 ,这一点和数学上不大一样。
(3)描边和填充
(4)常用方法
4.1 getContext():获取渲染的上下文,说白了,获取画笔。后面传递的参数,固定写"2d";
var context = canvas.getContext("2d");
4.2 moveTo(x,y):移动画笔的位置,后面带2个参数。
context.moveTo(100,200);
4.3 lineTo(x,y)画一条线,参数是线的终点位置。
context.lineTo(400,300);//目标位置
和线条相关的属性:
lineWidth:线条的宽度
strokeStyle:线条的颜色
4.4 stroke();绘制线条
context.stroke();
4.5 closePath();关闭路径,也就是回到起始点。
context.closePath()
4.6 fillStyle ;这是属性,设置填充的样式,一般填充颜色就可以。
ctx.fillStyle = "yellow";
4.7 ctx.fill();完成填充操作。
ctx.fill();
4.8 beginPath() 方法开始一条路径,或重置当前的路径。
ctx.closePath()
4.9 context.arc(x,y,r,start,end, direction)绘制一个弧。前面2个参数组成圆心的坐标,第三个参数r半径。第4个参数:start起始的弧度,第5个参数end,结束的弧度;最后一个参数direction,绘制方向,true:逆时针方向,false:顺时针方向,该值默认是false。
context.arc(200,200,100,0,1/2*Math.PI,true);
4.10 context.rect(x,y,w,h)绘制矩形,(x,y)是矩形左上角的坐标位置,w:矩形的宽度,h:矩形的高度。