<canvas id="myCanvas" width="150" height="150"></canvas>
HTML5<canvas>元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas>标签只是图形容器,必须使用脚本来绘制图形。可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。 <canvas>看起来<img>元素很相像,唯一的不同就是它并没有 src 和 alt 属性。实际上,<canvas>标签只有两个属性——widthheight。这些都是可选的,并且同样利用 DOM properties来设置。当没有设置宽度和高度的时候,canvas会初始化宽度为300像素和高度为150像素。该元素可以使用CSS来定义大小,但在绘制时图像会伸缩以适应它的框架尺寸:如果CSS的尺寸与初始画布的比例不一致,它会出现扭曲。 您的浏览器不支持 HTML5 canvas 标签。
<canvas id="myCanvas1" width="250" height="150" style="border:1px solid #ddd">您的浏览器不支持 HTML5 canvas 标签。</canvas>

<script>
var ctx=document.getElementById("myCanvas1").getContext("2d");

//方块
ctx.fillStyle="#f00";
ctx.fillRect(10,10,50,60);

//直线
ctx.moveTo(80,5);
ctx.lineTo(150,50);
ctx.stroke();

//圆
ctx.beginPath();
ctx.arc(200,40,30,0,1.5*Math.PI,false);
ctx.stroke();

//文字
ctx.font="30px Arial";
ctx.fillStyle="#0f0";
ctx.strokeText("Hello",10,50);
ctx.fillText("World",80,50);

//渐变
var grd=ctx.createLinearGradient(0,50,100,200);
grd.addColorStop(0.2,"#00f");
grd.addColorStop(1,"#fff");
ctx.fillStyle=grd;
ctx.fillRect(10,80,80,60);

//渐变圆
var grd=ctx.createRadialGradient(140,100,3,180,100,80);
grd.addColorStop(0,"#000");
grd.addColorStop(1,"#ff0");
ctx.fillStyle=grd;
ctx.fillRect(120,80,80,60);
</script>
您的浏览器不支持 HTML5 canvas 标签。
<canvas id="myCanvas2" width="200" height="100" style="border:1px solid #ddd">您的浏览器不支持 HTML5 canvas 标签。</canvas>

<script>
var ctx = document.getElementById("myCanvas2").getContext("2d");

//透明
ctx.fillStyle="rgba(200,0,0,0.8)";
ctx.fillRect(10,10,50,50);
ctx.fillStyle="rgba(0,0,200,0.5)";
ctx.fillRect(40,40,50,50);

//清除
ctx.fillStyle="#000";
ctx.clearRect(55,20,40,40);//清除
ctx.strokeRect(60,25,30,30);//边框

//三角
ctx.fillStyle="#0f0";
ctx.beginPath();
ctx.moveTo(100,50);
ctx.lineTo(140,50);
ctx.lineTo(110,80);
ctx.lineTo(120,30);
ctx.lineTo(130,80);
ctx.fill();
ctx.stroke();

//笑脸
ctx.fillStyle="#000";
ctx.beginPath();
ctx.arc(170,50,30,0,Math.PI*2);//绘制
ctx.moveTo(155,60);
ctx.arc(170,50,20,0.5,Math.PI*0.8,false);//口(顺时针)
ctx.moveTo(155,45);
ctx.arc(155,45,5,0,Math.PI*2);//左眼
ctx.moveTo(185,45);
ctx.arc(185,45,5,0,Math.PI*2);//右眼
ctx.stroke();
</script>