<canvas>新元素

 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。

　　注意: 默认情况下 <canvas> 元素没有边框和内容。

　　画方

$(function(){ ) ); ctx.fillStyle; ctx.fillRect(
　　　　　　　　　//ctx.lineTo(100,100);　　//定义结束坐标
　　　　　　　　　//ctx.stroke();　　　　　　//绘制线条
})

运行结果：

　　画圆

$(function(){ ) ); ctx.fillStyle; ctx.arc(Math.PI); ctx.stroke();

　　　　　　　　　//ctx.strokeText("Hello World",10,50);　//绘制空心字体
}) canvas{ border

运行结果：

　　渐变

　　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);

运行结果：

图像

canvas{ border #flower{ border width height $(function(){ ) ); img.onload=function(){ ctx.drawImage(img,2} })

运行结果：