<canvas>新元素
<canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。
注意: 默认情况下 <canvas> 元素没有边框和内容。
画方
<!--fillStyle是填充样式，如果不设置fillStyle属性，默认填充色为黑色，fillRect是画一个矩形，参数为X,Y,Width,Height--> <!DOCTYPE html> <html> <head> <meta charset="UTF-8" name="author" content="赵慧娟"> <title></title> <script src="Scripts/jquery-1.10.2.js"></script> <script type="text/javascript"> $(function(){ var canvas=document.getElementById("myCanvas") var ctx=canvas.getContext("2d"); ctx.fillStyle="deeppink"; ctx.fillRect(10,10,100,100);
//ctx.moveTo(0,0); //定义开始坐标
//ctx.lineTo(100,100); //定义结束坐标
//ctx.stroke(); //绘制线条
}) </script> </head> <body> <canvas id="myCanvas" width="100" height="100"></canvas> </body> </html>
运行结果：
画圆
<!--arc画圆，参数是X,Y,半径，起始角，结束角，顺时针/逆时针(可选)XY指的是圆点的距离--> <!DOCTYPE html> <html> <head> <meta charset="UTF-8" name="author" content="赵慧娟"> <title></title> <script src="Scripts/jquery-1.10.2.js"></script> <script type="text/javascript"> $(function(){ var canvas=document.getElementById("myCanvas") var ctx=canvas.getContext("2d"); ctx.fillStyle="deeppink"; ctx.arc(50,50,50,0,2*Math.PI); ctx.stroke();
//ctx.fillText("Hello World",10,50); //绘制实心字体
//ctx.strokeText("Hello World",10,50); //绘制空心字体
}) </script> <style type="text/css"> canvas{ border: 1px solid #000; } </style> </head> <body> <canvas id="myCanvas" width="100" height="100"></canvas> </body> </html>
运行结果：
渐变
createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
// 创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"blue");
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
运行结果：
径向/圆渐变
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 创建渐变
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
运行结果：
图像
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" name="author" content="赵慧娟"> <title></title> <script src="Scripts/jquery-1.10.2.js"></script> <style type="text/css"> canvas{ border: 1px solid #000; } #flower{ border: 1px solid #000; width: 100px; height: 100px; } </style> </head> <body> <img src="img/a.ico" id="flower" /> <canvas id="myCanvas" width="100" height="100"></canvas> <script type="text/javascript"> $(function(){ var canvas=document.getElementById("myCanvas") var ctx=canvas.getContext("2d");var img=document.getElementById("flower"); img.onload=function(){ ctx.drawImage(img,20,20,80,80); //drawImage（对象，X,Y，W,H） } }) </script> </body> </html>
运行结果：
（右图为canvas图像）