<!DOCTYPE html> <html class="no-js"> <head> <meta charset="utf-8"> <title>HTML5-Canvas</title> <script src="js/modernizr.js" type="text/javascript" charset="utf-8"></script> </head> <body> <canvas id="myCanvas" width="200" height="200" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> /* * 详细说明 ：http://www.cnblogs.com/cotton/p/4403042.html */ var c = document.getElementById("myCanvas"); var cxt = c.getContext("2d"); function line() { cxt.moveTo(10, 10);//为指定点创建了一个新的子路径,可以看成用来定位绘图鼠标用的（直线的起点，因为所有画线都和它相关，我们称之为上下文点）。 cxt.lineTo(100, 50); //从鼠标定位点，到方法参数中指定的点之间画一条直线 cxt.lineTo(10, 50); cxt.stroke();//为所画的线赋予颜色，并使其可见。如果没有特别的指定颜色的话，则默认使用黑色画直线。 } function arc() { cxt.fillStyle = "#FF0000"; cxt.beginPath();//定义了一个新的路径绘制动作的开始 cxt.arc(120, 20, 15, Math.PI, Math.PI * 2, true);//圆心坐标（x,y），半径，弧度起始点，结束点，画弧方向（true-顺时针，false-逆时针） cxt.closePath(); cxt.fill(); } function LinearGradient() { var grd = cxt.createLinearGradient(0, 0, 175, 50);//渐变路径的起始坐标和结束坐标（简单理解就是画了一条直线） grd.addColorStop(0, "#FF0000");//函数名字面意思是增加颜色停止点，就是把刚画的渐变路径定义为1，p是所在路径的位置（0-1之间），c则是渐变到p时候的颜色值。 grd.addColorStop(1, "#00FF00"); cxt.fillStyle = grd; cxt.fillRect(0, 55, 175, 50); } function drawImg() { var img = new Image() img.src = "http://w3school.com.cn/i/ct_html5_canvas_image.gif" cxt.drawImage(img, 0, 110);//图片及起始坐标 } </script> <input type="button" value="直线" onclick="line()" /> <input type="button" value="弧" onclick="arc()" /> <input type="button" value="渐变" onclick="LinearGradient()" /> <input type="button" value="图" onclick="drawImg()" /> </body> </html>