HTML5 Canvas画布

7HTML5 Canvas画布

1、       Canvas:定义画布的大小是style的属性，而定义画布的像素是Canvas的属性

如果设置Style里面的width和height他仅表示canvas元素占文档流的位置，这时候画布的宽度 和高度是默认值，分别是600、300.

注意：设置canvas的宽度的，直接操作canvas的width属性和height属性。如果要放大canvas画布，设置的CSS width和height属性值，比例保持一致，说白了就是等比缩放。

2、       坐标系

坐标原点是左上角，和数学上不大一样

3、       描边和填充

 

 

 

 

 

 

 

4、       常用方法

4.1、getContext（）：获取渲染的上下文，说白了就是获取画笔。后面传递参数，固定写“2d”

4.2、moveTo（x，y）：移动画笔位置，后面带两个参数。

4.3、lineTo（x，y）画一条直线，参数是线的终点位置。

4.4、stroke()绘制线条

4.5、closepath():关闭路径，回到起始点

4.6、ctx.fill（）完成填充操作

4.7、fillStyle：这是属性，设置填充的样式，一般填充颜色就行

4.8、beginPath（）:方法开始一条路径或者重置当前路径。

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

 

 

4.10context。rect（x,y,w,h）绘制矩形，（x，y）是矩形的坐标，w：是宽，h高

 

 

window.onload = function () {
    var canvas = document.getElementById("canvas");
    canvas.width=500;//画布的宽
    canvas.height=500;//画布的高
    var context=canvas.getContext("2d");
    context.moveTo(100,200);//移动圆点
    context.lineTo(100,400);//目标位置
    context.lineWidth=10;//目标粗细
    context.strokeStyle="red";//画笔的样式
    context.stroke();//开始画
};

 

context.closePath();            ///回到原点，解决封口问题

 

圆形：

context.arc(250,250,200,0,2*Math.PI,false);
        //左边距，上边距，半径，起始角度，目标角度，时针（true）
        context.lineWidth=10;//目标粗细
        context.strokeStyle="red";//画笔的样式
/*       context.fillStyle="red";
        context.fill();*/
        context.stroke();//开始画