使用HTML5中的canvas来创建图形，创建矩形，渐变，图像裁剪，阴影：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用Canvas绘图</title> </head> <body> <canvas id="canvas" width="800" height="600"></canvas> <img src="img/cart.png" /> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.shadowOffsetX = 5;//阴影的x轴偏移量（px） ctx.shadowOffsetY = 5;//阴影的y轴偏移量（px） ctx.shadowBlur = 4;//阴影的模糊度（px） ctx.shadowColor = "rgba(0,0,0,0.5)"; //阴影的颜色 //填充矩形 //fillRect接受四个参数：x,y,width,height。即起始坐标(x,y),矩形的宽和高 ctx.fillStyle = "red"; ctx.fillRect(10, 10, 50, 50); ctx.fillStyle = "rgba(0, 0, 255, 0.5)"; ctx.fillRect(30, 30, 50, 50); ctx.clearRect(40, 40, 10, 10);//清除画布上的矩形区域 //描边矩形 ctx.strokeStyle = "#3193D0"; ctx.strokeRect(50, 50, 50, 50); ctx.strokeStyle = "#F74E0D"; ctx.strokeRect(70, 70, 50, 50); //绘制路径,绘制一个表盘 ctx.strokeStyle = "blue"; ctx.beginPath(); //绘制外圆 ctx.arc(250, 100, 99, 0, 2* Math.PI, false); //绘制内圆 ctx.moveTo(344, 100);//移到绘制圆形的起点处 ctx.arc(250, 100, 94, 0, 2 * Math.PI, false); //绘制秒针 var j = 0; ctx.moveTo(250, 100); ctx.lineTo(250, 25); //绘制分针 ctx.moveTo(250, 100); ctx.lineTo(200, 100); ctx.stroke(); //绘制文本 ctx.font = "bold 14px Arial";//文字字体，大小 ctx.textAlign = "center"; //文本对齐方式 ctx.textBaseline = "middle"; //文本的基线 for(var i=0; i<12; i++) { var posX = Math.round(82 * Math.cos((Math.PI * i)/6)); var posY = Math.round(82 * Math.sin((Math.PI * i)/6)); var x, y, num; if(i >= 3 && i <= 9) { y = 100 - posY; x = 250 + posX; } else { y = 100 - posY; if( i >= 0) { x = 250 + posX; } else { x = 250 - posX; } } if(i < 3) { num = 3 - i; } else { num = 15 - i; } ctx.fillText(num, x, y); } //绘制图片 var pic = document.images[0]; //图像元素，裁剪起点x,裁剪起点y，裁剪宽，裁剪高，放置位置x，放置位置y，放置宽度，放置高度 //下例：0,0表示从原图像的左上角（0,0）处开始裁剪，裁剪的大小为（100*80） //（400,100）为在canvas中的显示位置（左上角），（120,120）表示显示大小（120*120） ctx.drawImage(pic, 0, 0, 100, 80, 400, 100, 120, 120);//裁剪图像 //线性渐变和径向渐变（放射渐变） //(90,90)渐变起点左边，(140,140)渐变结束坐标 var linearGradient = ctx.createLinearGradient(90, 90, 140, 140); linearGradient.addColorStop(0, "red"); linearGradient.addColorStop(1, "yellow"); ctx.fillStyle = linearGradient; ctx.fillRect(90, 90, 50, 50); //（35，175,10）起始圆的原点坐标和半径，（35,175,30）终点圆的远点坐标和半径 var radialGradient = ctx.createRadialGradient(35, 175, 10, 35, 175, 30); radialGradient.addColorStop(0, "purple"); radialGradient.addColorStop(1, "pink"); ctx.fillStyle = radialGradient; ctx.fillRect(10, 150, 50, 50); </script> </body> </html>此部分结果：
