canvas学习笔记

function draw(){
                var canvas = document.getElementById('myCanvas');   //获得canvas的dom对象
                var ww = document.documentElement.clientWidth;   //获得屏幕的宽度
                var wh = document.documentElement.clientHeight;   //获得屏幕的高度
                canvas.width = ww;   //赋值
                canvas.height = wh;
                if(canvas.getContext){   //检测浏览器是否兼容
                    var ctx = canvas.getContext('2d');     //获得渲染上下文。类似于拿到画笔
                    ctx.fillStyle = 'rgb(250,0,0)';    //设置充填颜色
                    ctx.fillRect(10,10,55,55);    //绘制一个充填的矩形  fillRect(x,y,width,height);

                    ctx.fillStyle = 'rgba(0,0,250,0.5)';
                    ctx.fillRect(20,20,55,55);

                    
                }
            }
            draw();

canvas的宽度和高度不能用百分比，不然会出现图片模糊扭曲的现象。

cvs.width--cvs.height---->定义的是画布的宽度和高度。可以把画布的宽度和高度定义的高一些，里面绘制的东西大一些，然后就可以实现在高清屏幕下也不会变得模糊了。

cvs.style.width和cvs.style.height------>定义的是canvas图像的宽度和高度，类似与img，改变一个值，另一个值会等比缩放。如果两个值同时改变的话，很有可能图像会变形。

 总结如下：cvs.style.width和cvs.style.height的比例一定要和cvs.width--cvs.height的宽高比例是一样的才行。不然变形。

canvas提供了三种方法绘制矩形：

fillRect(x, y, width, height)

绘制一个填充的矩形

strokeRect(x, y, width, height)

绘制一个矩形的边框

clearRect(x, y, width, height)

清除指定矩形区域，让清除部分完全透明。

上面提供的方法之中每一个都包含了相同的参数。x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）的坐标。width和height设置矩形的尺寸。

ctx.fillRect(100,100,100,100);
ctx.clearRect(120,120,70,70);    //顺序不能乱,如果是先strokeRect的话，就会清除了这个区域了。
ctx.strokeRect(130,130,50,50);

绘制路径

图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。使用路径绘制图形需要一些额外的步骤。

1. 首先，你需要创建路径起始点。
2. 然后你使用画图命令去画出路径。
3. 之后你把路径封闭。
4. 一旦路径生成，你就能通过描边或填充路径区域来渲染图形。

以下是所要用到的函数：

beginPath()

新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。

closePath()

闭合路径之后图形绘制命令又重新指向到上下文中。

stroke()

通过线条来绘制图形轮廓。

fill()

通过填充路径的内容区域生成实心的图形。

// 绘制一个三角形
                    ctx.beginPath();
                    ctx.moveTo(275,255);
                    ctx.lineTo(300,275);
                    ctx.lineTo(255,275);
                    ctx.closePath();
                    ctx.stroke();

生成路径的第一步叫做beginPath()。本质上，路径是由很多子路径构成，这些子路径都是在一个列表中，所有的子路径（线、弧形、等等）构成图形。而每次这个方法调用之后，列表清空重置，然后我们就可以重新绘制新的图形。

 注意：当前路径为空，即调用beginPath()之后，或者canvas刚建的时候，第一条路径构造命令通常被视为是moveTo（），无论最后的是什么。出于这个原因，你几乎总是要在设置路径之后专门指定你的起始位置。

第二步就是调用函数指定绘制路径，本文稍后我们就能看到了。

第三，就是闭合路径closePath(),不是必需的。这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。如果图形是已经闭合了的，即当前点为开始点，该函数什么也不做。

注意：当你调用fill()函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合。

 

// 绘制一个笑脸
                    ctx.beginPath();
                    ctx.arc(500,500,100,0,Math.PI*2,true);    //false = 顺时针，true = 逆时针
                    //ctx.moveTo(575,500);
                    ctx.arc(500,500,75,0,Math.PI,false);
                    //ctx.moveTo(470,460);
                    ctx.arc(460,460,10,0,Math.PI*2,true);
                    //ctx.moveTo(540,460);
                    ctx.arc(530,460,10,0,Math.PI*2,false);
                    ctx.stroke();

// 绘制一个笑脸
                    ctx.beginPath();
                    ctx.arc(500,500,100,0,Math.PI*2,true);    //false = 顺时针，true = 逆时针
                    ctx.moveTo(575,500);
                    ctx.arc(500,500,75,0,Math.PI,false);
                    ctx.moveTo(470,460);
                    ctx.arc(460,460,10,0,Math.PI*2,true);
                    ctx.moveTo(540,460);
                    ctx.arc(530,460,10,0,Math.PI*2,false);
                    ctx.stroke();

线

绘制直线，需要用到的方法lineTo()。

lineTo(x, y)

绘制一条从当前位置到指定x以及y位置的直线。

该方法有两个参数：x以及y ，代表坐标系中直线结束的点。开始点和之前的绘制路径有关，之前路径的结束点就是接下来的开始点，等等。。。开始点也可以通过moveTo()函数改变。

//绘制一个充填的三角形
					ctx.beginPath();
					ctx.moveTo(300,255);
					ctx.lineTo(300,355);
					ctx.lineTo(400,355);
					ctx.fill();

　　

圆弧

绘制圆弧或者圆，我们使用arc()方法。当然可以使用arcTo()，不过这个的现实并不是那么的可靠，所以我们这里不作介绍。

arc(x, y, radius, startAngle, endAngle, anticlockwise)

画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。