<!DOCTYPE html> <html> <head> <title>canvas</title> </head> <body> <canvas id="canvas" width="500" height="600" style="border:1px solid #ddd;"> 浏览器不支持 </canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); // context.moveTo(10,10); // context.lineTo(150,50); // context.lineTo(10,50); // context.stroke(); //划矩形 200*200 context.fillStyle = "#ff0000"; context.fillRect(0,0, 500,600); //划线 context.moveTo(200,200); context.lineTo(500,500); context.lineTo(150,300); context.stroke();//执行划线 //划圆 context.fillStyle = "#00ff00"; context.beginPath(); context.arc(250,300,50,0,2*Math.PI, true); context.closePath(); context.fill(); //划渐变 var gradient = context.createLinearGradient(0,0,250,0); gradient.addColorStop(0, "#ff0000"); gradient.addColorStop(1, "#00ff00"); context.fillStyle = gradient; context.fillRect(0,0,250,250); //划现有的图片 var img = new Image(); img.src = "1.jpg"; context.drawImage(img, 0, 0); </script> </body> </html>
效果如下：
原文：http://www.cnblogs.com/yuwensong/p/5169343.html