<!-- 1.15canvas标签-->
<!-- 1.15.1canvas标签定义图形容器，提供API给JS绘制图形-->
<canvas width="300px" height="100px" id="canvas1">你浏览器不支持canvas</canvas>

<script type="text/javascript">
var canvas=document.getElementById("canvas1");
var ctx=canvas.getContext("2d");
ctx.fillStyle='green';
ctx.fillRect(0,0,100,100);
</script>
<canvas id="canvas2">不支持canvas</canvas>

<script type="text/javascript">
var canvas=document.getElementById("canvas2");
var ctx=canvas.getContext("2d");
var img=new Image();
img.src="../img/穆勒.jpg";
ctx.drawImage(img,0,0);
</script>
<canvas id="canvas3" height="300px">不支持canvas</canvas>
<script type="text/javascript">
var canvas=document.getElementById("canvas3");
var ctx=canvas.getContext('2d');
ctx.moveTo(2,85);
ctx.lineTo(182,82);
ctx.lineTo(1,203);
ctx.lineTo(74,6);
ctx.lineTo(159,197);
ctx.lineTo(2,85);
ctx.stroke();
var grd=ctx.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
ctx.fillStyle=grd;
ctx.fillRect(0,0,175,50);
ctx.beginPath();
ctx.arc(100,100,15,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
</script>