十年网站开发经验+多家企业客户+靠谱的建站团队
量身定制+运营维护+专业推广+无忧售后，网站问题一站解决
代码如下:
加入Canvas
//取得Canvas元素及其绘图上下文varcanvas=document.getElementById("diagonal");varcontext=canvas.getContext("2d");//用绝对坐标来创建一条路径context.beginPath();context.moveTo(70,140);context.lineTo(140,70);//将这条线绘制到Canvas上context.stroke();
变换
可以通过变换(缩放、平移、旋转)等达到和上面相同的效果。
用变换的方式绘制对角线
//取得Canvas元素及其绘图上下文varcanvas=document.getElementById("diagonal");varcontext=canvas.getContext("2d");//保存当前绘图状态context.save();//向右下方移动绘图上下文context.translate(70,140);//以原点为起点，绘制与前面相同的线段context.beginPath();context.moveTo(0,0);context.lineTo(70,-70);context.stroke();
context.restore();
路径
HTML5CanvasAPI中的路径代表你希望呈现的任何形状。
beginPath():不论开始绘制何种图形，第一个需要调用的就是beginPath。这个简单的函数不带任何参数，它用来通知canvas将要开始绘制一个新的图形了。
moveTo(x,y):不绘制，将当前位置移动到新的目标坐标(x,y)。
lineTo(x,y):不仅将当前位置移动到新的目标坐标(x,y)，而且在两个坐标之间画一条直线。
closePath():这个函数行为和lineTo很像，的差别在于closePath会将路径的起始坐标自动作为目标坐标。它还会通知canvas当前绘制的图形已经闭合或者形成了完全封闭区域，这对将来的填充和描边都非常有用。
绘制一个松树地树冠
functioncreateCanopyPath(context){//Drawthetreecanopycontext.beginPath();
context.moveTo(-25,-50);context.lineTo(-10,-80);context.lineTo(-20,-80);context.lineTo(-5,-110);context.lineTo(-15,-110);
//树的顶点context.lineTo(0,-140);
context.lineTo(15,-110);context.lineTo(5,-110);context.lineTo(20,-80);context.lineTo(10,-80);context.lineTo(25,-50);//连接起点，闭合路径context.closePath();}
context.save();context.translate(130,250);
//创建表现树冠的路径createCanopyPath(context);
//绘制当前路径context.stroke();context.restore();}
window.addEventListener("load",drawTrails,true);
描边样式
通过描边模式，可以让树冠看起来更加真实。
填充样式
context.fillStyle="#339900";context.fill();
绘制矩形
我们给树增加树干
绘制曲线
context.save();context.translate(-10,350);context.beginPath();
//第一条曲线向右上方弯曲context.moveTo(0,0);context.quadraticCurveTo(170,-50,260,-190);
//向右下方弯曲context.quadraticCurveTo(310,-250,410,-250);
//Restorethepreviouscanvasstatecontext.restore();
在Canvas中插入图片
必须等到图片完全加载后才能对其进行操作。浏览器通常会在页面脚本执行时异步加载图片，如果试图在图片未完全加载之前就将其呈现到canvas上，那么canvas将不会显示任何图片，因此，特别注意，在呈现之前，应确保图片已加载完毕。
//加载图片varbark=newImage();bark.src="bark.jpg";
//图片加载完成后，再调用绘图的函数bark.onload=function(){drawTrails();}
显示图片：
//用背景图案填充，作为树干的背景context.drawImage(bark,-5,-50,10,50);
渐变
使用渐变需要三个步骤：
(1)创建渐变对象
(2)为渐变对象设置颜色，指明过渡方式
(3)在context上为填充样式或者描边样式设置渐变
//创建用作树干纹理的三阶水平渐变vartrunkGradient=context.createLinearGradient(-5,-50,5,-50);
//在树干上填充投影渐变context.fillStyle=canopyShadow;context.fillRect(-5,-50,10,50);
背景图
//加载图片vargravel=newImage();gravel.src="gravel.jpg";gravel.onload=function(){drawTrails();}
context.createPattern的第二个参数是重复性标记，可以在表2-1中选择合适的值。
缩放
缩放函数context.scale(x,y)：x,y分别代表在x,y两个维度的值。每个参数在canvas显示图像的时候，向其传递在本方向轴上图像要放大(或缩小)的量。如果x值为2，就代表所绘制图像中全部元素会变成两倍宽，如果y值为0。5，绘制出来的图像会变成之前的一半高。
//在X=130,Y=250处绘制第一棵树context.save();context.translate(130,250);drawTree(context);context.restore();
//在X=260,Y=500处绘制第二棵树context.save();context.translate(260,500);
//将第二棵树的高宽放大到原来的2倍context.scale(2,2);drawTree(context);context.restore();
旋转
旋转图像
context.save();//旋转角度参数以弧度为单位context.rotate(1.57);context.drawImage(myImage,0,0,100,100);
一种变换的使用方法
//保存当前状态context.save();
//X值随着Y值增加而增加，借助拉伸变换，//可以创建一棵用作阴影的倾斜的树//应用了变换以后，所有坐标都与矩阵相乘context.transform(1,0,-0.5,1,,0);
//在Y轴方向，将阴影高度变为原来的60%context.scale(1,0.6);
//使用已有的阴影效果重新绘制树createCanopyPath(context);context.fill();
//恢复之前的canvas状态context.restore();
文本
context.fillText(text,x,y,maxwidth):text文本内容，x,y指定文本位置,maxwidth是可选参数，限制文本位置。context.strokeText(text,x,y,maxwidth):text文本内容，x,y指定文本位置,maxwidth是可选参数，限制文本位置。
//在canvas上绘制文本context.save();
//字号为60,字体为Impactcontext.font="60pximpact";
阴影
可以通过几种全局context属性来控制阴影
//向右移动15px,向左移动10pxcontext.shadowOffsetX=15;context.shadowOffsetY=-10;
//轻微模糊阴影context.shadowBlur=2;
像素数据
context.getImageData(sx,sy,sw,sh)：sx,xy确定一个点，sw:宽度，sh:高度。
这个函数返回三个属性：width每行有多少个像素height每列有多少个像素
data一堆数组，存有从canvas获取的每个像素的RGBA值（值红、绿、蓝和透明度）。
context.putImageData(imagedata,dx,dy)：允许开发人员传入一组图像数据，dx,dy用来指定偏移量，如果使用，则该函数就会跳到指定的canvas位置去更新
显示传进来的像素数据。
canvas.toDataUrl：可以通过编程获取canvas上当前呈现的数据，获得的数据以文本格式保存，浏览器能将其解析成图像。