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）坐标系

坐标的圆点是在左上角

定义画布的大小是style的属性，而定义画布的像素是canvas特有的width，height属性

var canvas= document.getElementById("canvas");
canvas.width = 500;
canvas.height = 500;
var context = canvas.getContext("2d");

context.moveTo(100,200);//移动原点，起始位置
context.lineTo(50,300);//目标位置
context.lineWidth = 10;//画笔的粗细
context.strokeStyle = "red";//画笔的样式
context.stroke();//开始画画

 

canvas是内联元素

 

 

 

画园

context.arc(200,200,100,800,1/2*Math.PI,true);

参数：（圆心X，圆心Y，半径，起始角度，目标角度，画的方向【可选】）默认的是顺时针（false）

 

 

（3）描边和填充

 stroke（描边）fill（填充）

（4）常用方法

getContext("2d")：获取渲染的上下文，说白了  获取画笔,后面的参数固定写“2d”

var context=canvas.getContext("2d");

 

moveTo(x,y):移动画笔的位置，后面带两个参数

context.moveTo(250,150);

lineTo(x,y)：加一条线，参数是线的终点位置

context.lineTo(250,300);

和线条相关的属性

lineWidth = 1;线的宽度

strokeStyle 线条的颜色

stroke()绘制线条

clearRect()关闭路径 也就是回到起点

fillStyle：这是属性  设置属性填充的颜色一般填颜色就可以

ctx.fillStyle= "yellow";

fill():完成填充操作

ctx.fill();

beginPath()方法开始一条路径，或重置当前路径

beginPath()

arc(x，y，r，start，end，direction)绘制一个弧。前面两个参数组成圆心的坐标，第三个参数r半径。第四个参数：start起始的弧度，第五个参数end结束的弧度，最后一个参数direction，绘制方向，true：逆时针方向，false：顺时针方向，该默认是false

context.rect（x，y，w，h）绘制矩形（x，y）是矩形左上角的坐标位置，w：矩形的宽度 ， h：矩形的高度。