按照官方例子画了几个基本图形,算是对于HTML5 Canvas有所了解，但是感觉这里面数学知识太忘记了，虽然以前数学竞赛出身，但是好多年不用了，有所遗忘。

HTML5的canvas元素只是提供了一个画布，而实际的绘制工作由javascript来完成。

基本HTML不说了， 也就是搭一个架子，放一个<canvas>元素，然后首部引入一些javascript文件，这里面每一个js文件都是一个画图的例子.

<!DOCTYPEhtml><head><metacharset="UTF-8"><title>HTML5CanvasDEMO</title><scripttype="text/javascript"src="js/drawRect.js"></script><scripttype="text/javascript"src="js/drawPath.js"></script><scripttype="text/javascript"src="js/drawLine.js"></script><scripttype="text/javascript"src="js/drawLinearGradient.js"></script><scripttype="text/javascript"src="js/drawTransformShape.js"></script><scripttype="text/javascript"src="js/drawAll.js"></script></head><bodyonload="drawAll('canvas')"></body><h3>canvas：放开你的梦想</h3><canvasid="canvas"width="400"height="300"/><br><br>

例子1：绘制矩形

/***ThisfileisconfidentialbyCharles.Wang*CopyrightbelongstoCharles.wang*YoucanmakecontactwithCharles.Wang(charles_wang888@126.com)*///这段js代码用于画一个长方形//参数是传进来的画布canvas的id,表明这段代码画在哪里functiondrawRect(id){//取得canvas对象，也就是我们js代码要画的canvas对象varcanvas=document.getElementById('canvas');if(canvas==null)returnfalse;//从canvas取得图形上下文，这个图形上下文context封装了许多绘画方法，这是一个内置的html5对象varcontext=canvas.getContext('2d');//设定好当前图形上下文的样式，夜就是当前使用颜色来绘制图形，此外还有一些其他的样式context.fillStyle="#0044FF";//fillXXX用来填充图形的内部，这里fillRect，表明用当前颜色填充图形内部，4个参数分别为起点横坐标/起点纵坐标/宽度/高度context.fillRect(0,0,400,300);//颜色值既可以用十六进制命名，也可以使用颜色名context.fillStyle="red";context.strokeStyle="blue";//用于设置图形边框的宽度context.lineWidth=1;context.fillRect(50,50,100,100);//strokeXXX用来描述图形的边框(stroke),这里strokeRect，表明用来绘制刚才矩形的边框context.strokeRect(50,50,100,100);}

画出来的结果是：

例子2：用Path来绘制一组圆形：

/***ThisfileisconfidentialbyCharles.Wang*CopyrightbelongstoCharles.wang*YoucanmakecontactwithCharles.Wang(charles_wang888@126.com)*/functiondrawPath(id){varcanvas=document.getElementById(id);if(canvas==null)returnfalse;//依旧先拿到canvas对象和上下文对象varcontext=canvas.getContext("2d");//先绘制画布的底图context.fillStyle="#EEEEEF";context.fillRect(0,0,400,300);//用循环绘制10个圆形varn=0;for(vari=0;i<10;i++){//开始创建路径，因为要画圆，圆本质上也是一个路径，这里向canvas说明，我要开始画了，这是起点context.beginPath();//画一个拱形(arcade)，因为圆是一种特殊的拱形//6个参数分别是起点横坐标，起点纵坐标，圆的半径，起始弧度，结束弧度（2PI刚好是360度），是否顺时针context.arc(i*25,i*25,i*10,0,Math.PI*2,true);//关闭路径context.closePath();context.fillStyle="rgba(255,0,0,0.25)";//填充刚才所画的圆形context.fill();}}

画出来的结果是：

例子3：绘制直线，并且用直线组合复杂图形

/***ThisfileisconfidentialbyCharles.Wang*CopyrightbelongstoCharles.wang*YoucanmakecontactwithCharles.Wang(charles_wang888@126.com)*/functiondrawLine(id){varcanvas=document.getElementById(id);if(canvas==null)returnfalse;varcontext=canvas.getContext('2d');context.fillStyle="#FF00FF";context.fillRect(0,0,400,300);varn=0;vardx=150;vardy=150;vars=100;context.beginPath();context.fillStyle='rgb(100,255,100)';context.strokeStyle='rgb(0,0,100)';varx=Math.sin(0);vary=Math.cos(0);vardig=Math.PI/15*11;for(vari=0;i<30;i++){varx=Math.sin(i*dig);vary=Math.cos(i*dig);//用三角函数计算顶点context.lineTo(dx+x*s,dy+y*s);}context.closePath();context.fill();context.stroke();}

画出来的结果是：

例子4：使用线性渐变

/***ThisfileisconfidentialbyCharles.Wang*CopyrightbelongstoCharles.wang*YoucanmakecontactwithCharles.Wang(charles_wang888@126.com)*///渐变用于填充，是指填充图形时从某种颜色慢慢过渡到另外一种颜色//线性渐变是指在一个线段之间进行渐变，线段上每个点随着离开起点的位移值的变化，其颜色也在变化functiondrawLinearGradient(id){varcanvas=document.getElementById(id);if(canvas==null)returnfalse;//我们还是先绘制底图，这次，我们的底图也用了渐变varcontext=canvas.getContext('2d');//第一个渐变，用于底图，它调用了createlinearGradient创建了一个渐变//4个参数分别为起点的横坐标,起点的纵坐标，结束点的横坐标，结束点的纵坐标，所以本例就是从(0,0)到(0,300)，所以是一个竖直向下的渐变vargradient1=context.createLinearGradient(0,0,0,300);//addColorStop可以设置渐变的颜色，第一个参数表示偏移量（0-1）之间，第二个参数表示颜色//所以，我们定义了从×××到蓝色的渐变gradient1.addColorStop(0,'rgb(255,255,0)');gradient1.addColorStop(1,'rgb(0,255,255)');//将上下文对象关联到当前的渐变设定作为填充风格context.fillStyle=gradient1;//用我们定义的渐变来绘制底图context.fillRect(0,0,400,300);varn=0;//这次我们要画一组圆圈，我们定义一个从(0,0)到(300,0)也就是水平方向从左到右的渐变vargradient2=context.createLinearGradient(0,0,300,0);//设置渐变色的起始颜色和终止颜色gradient2.addColorStop(0,'rgba(0,0,255,0.5');gradient2.addColorStop(1,'rgba(255,0,0,0.5)');//用循环画圆，并且用渐变色填充for(vari=0;i<10;i++){context.beginPath();context.fillStyle=gradient2;context.arc(i*25,i*25,i*10,0,Math.PI*2,true);context.closePath();context.fill();}}

画出来的结果是：

例子5：图形基本变换（平移，缩放，旋转）

/***ThisfileisconfidentialbyCharles.Wang*CopyrightbelongstoCharles.wang*YoucanmakecontactwithCharles.Wang(charles_wang888@126.com)*///这个函数用于演示一些常用的坐标变换//常见的坐标变换有平移，缩放，旋转functiondrawTransformShape(id){varcanvas=document.getElementById(id);if(canvas==null)returnfalse;//画底图varcontext=canvas.getContext('2d');context.fillStyle="#FF00FF";context.fillRect(0,0,400,300);//移动坐标轴的原点，因为这里向右边平移了200，向下移动了50，所以水平方向是居中了context.translate(200,50);//循环可以画一系列的五角星for(vari=0;i<50;i++){//每次坐标轴的原点往右下各移动25像素context.translate(25,25);//并且每次进行缩放到0.95倍context.scale(0.95,0.95);//然后把这个图形进行旋转，每次转动+18度（也就是顺时针）context.rotate(Math.PI/10);//然后在当前位置画一个五角星create5star(context);//并且填充当前五角星context.fill();}}//这个函数用于绘制一个五角星functioncreate5star(context){varn=0;vardx=100;vardy=0;vars=50;//创建路径context.beginPath();context.fillStyle="rgba(255,0,0,0.5)";varx=Math.sin(0);vary=Math.cos(0);vardig=Math.PI/5*4;//画五角星的五条边for(vari=0;i<5;i++){varx=Math.sin(i*dig);vary=Math.cos(i*dig);context.lineTo(dx+x*s,dy+y*s);}context.closePath();}

画出来的结果是：