canvas 简单用法

canvas使用方法

         1、首先要获取页面中的画布

                   var canvas = document.querySelector("canvas");

         2、创建画笔

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

         3、选择要绘画的方式，进行绘画

                   1.context.stroke()   描边

                            context.strokeStyle = "#f00"   描边样式

                   2.context.fill()  填充

                            context.fillStyle = "#f00";         填充样式

1、绘画矩形

         x,y,w,h 分别代表横纵坐标和宽高

         context.strokeRect(x,y,w,h)    描边矩形

         context.fillRect(x,y,w,h); 填充矩形

2、渐变

         创建渐变对象

         var g = context.createLinearGradient(50,100,550,100);

         添加颜色

         g.addColorStop(0,"#f00")

         g.addColorStop(0.5,"#fff")

         g.addColorStop(1,"#f0f");

         使用渐变对象填充

         context.fillStyle = g

         context.fillRect(50,50,500,200);

3、绘画文本

         context.strokeText("想要绘画的文本",x,y)          描边文本

         context.fillText("....",x,y)                            填充文本

         var text = "阿打算打打打"；

         context.measuerText(text).wifth                      获取文本的宽度

         context.measureText(text).heght                     获取文本的高度

         context.textBaseline = "top"  文本基线

                   默认值为：alphabetic  第三根线

                   属性值：top middle bottom

4、绘制（路径）

         （注意：在绘制路径的时候最好是开始一段路径后在绘制完成后关闭画笔）

         context.beginPath()         开始一段路径

         context.moveTo(x,y)        开始的第一个点

         context.lineTo(x,y)   经过的一个点，可以有多个

         context.fill()               填充一段路径

         context.stroke()       描边一段路径

         context.closePath();         结束一段路径的绘制

        

         绘制圆

                   context.arc(x,y,r,start,end)  分别为：横纵坐标，半径，开始时的弧度，结束时

的弧度

                   context.fill()     填充这个圆

                   context.stroke()       描边这个圆

5、绘制图片

         创建一个img对象

         var img = new Image();

         添加图片路径

         img.src = ""

         因为src是异步，需要等img完全加载完才能去绘制

         img.onload = function(){

         context.drawImage(img,x,y,w,h);

         }

6、画布中常用的一些方法，属性

         context.fill()                        填充方法

         context.stroke()                描边方法

         context.clip()                      剪切方法

         context.lineWidth = "10"         设置边框的宽度

         context.fillStyle = "#f00" 填充样式

         context.strokeStyle = "#f00"   描边样式

         context.textBaseline = "top"  基线设置方式，参数有 top middle ..

         context.measureText(txt).width     获取文本的宽度

         context.font = "10px SieHer " 设置字体大小以及样式 ，两个参数都需要

         context.getContext("2d")        获得2d画笔

         context.beginPath();                 开始一段路径

         context.closePath();                  结束一段路径

         context.scale(0.9,0.9)     坐标的缩放倍数

         context.drawImage(img,x,y,w,h);            将图片绘制到画布上

         context.save();                  保存绘图的上下文  ，当前变形的数据（坐标什么呀什么的）

         context.restore();    恢复最近一次保存的画笔的变形状态

         context.translate(); 变化坐标原点的变化（平移）

         context.rotate();      画笔旋转