HTML5 Canvas画布
(1)canvas元素
width和height跟style里面的width和height一样吗?
如果之际设置canvas的width和height:画布和元素的宽度都是你设置的值。
如果设置的style里面的width和height,它仅表示canvas元素占文档流的位置。这时候画布的宽度和高度是默认值。分别是600,300。
注:设置canvas的宽度和高度,直接操作canvas的width和height属性。如果需要放大canvas画布,设置的CSS width和height应该和canvas width、height属性值,比例保持一致,说白了就是等比缩放。
(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(50,300);
和线条相关的属性:
lineWidth:线条的宽度
strokeStyle:线条的颜色
4.4 stroke();绘制context.stroke(); closePath();关闭路径,也就是回到起始点。
context.closePath();
4.6 fillStyle();这时属性,设置填充的样式,一般填充颜色就可以了。
context.fillStyle = "blue";
4.7 fill();完成填充操作
context.fill();
4.8 beginPath();方法:开始一条路径,或重置当前的路径。
context.beginPath();
4.9 context.arc(x,y,r,start,end,direction)绘制一条弧。前面2个参数组成圆心的坐标;第三个参数r半径;第四个参数:start起始的弧度;第五个参数:end结束的弧度;最后一个参数direction是绘制的方向:true逆时针,默认false是顺时针。
context.arc(200,200,100,0,1/2*Math.PI,true);
4.10 context.rect(x,y,w,h);绘制矩形,x和y是矩形左上角的坐标位置,w是矩形的宽度,h是矩形的高度。
context.rect(100,100,200,100);
了解:贝塞尔曲线
定义画布的大小是style的属性,而定义画布的像素,是canvas特有的width,height属性。
<script>
window.onload = function(){
//画布
var canvas = document.getElementById("canvas");
canvas.width = 500;
canvas.height = 500;
//画笔
var context = canvas.getContext("2d");//目前只有2d这个属性
}
</script>
canvas是内联元素。
画第一笔:
context.moveTo(100,200);//移动原点,起始位置
context.lineTo(50,300);//目标位置
context.lineWidth = 10;//画笔的粗细
context.strokeStyle = "red";//画笔的样式
context.stroke();//开始画调用前面所有,必须放在最后
画第二笔:
context.beginPath();//开始新的一笔
context.moveTo(200,200);
context.lineTo(150,300);
context.lineTo(200,400);
context.lineWidth = 5;
context.strokeStyle = "pink";
context.stroke();
画圆的方法:context.arc(圆心X,圆心Y,半径,起始角度,目标角度,画的方向[true,false])
context.arc(200,200,100,0,1/2*Math.PI,true);//true逆时针画,默认顺时针