html5中Canvas的使用

zijue 2021-08-14 原文

1.画矩形(红色）

 1 <body>
 2 
 3 <canvas id="myCanvas" width="200" height="100">
 4 </canvas>
 5 <script type="text/javascript">
 6 var c=document.getElementById("myCanvas");
 7 var cxt= c.getContext("2d");
 8 cxt.fillStyle="#FF0000";
 9 cxt.fillRect(0,0,150,75);
10 </script>
11 </body>

2.画三角形

<body>
<canvas id="myCanvas1" width="200" height="100" style="border:1px solid #c3c3c3;">
Your DDDDDD</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas1");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.lineTo(10,10);
cxt.stroke();
</script>
</body>

3.画圆并填充颜色

 1 <body>
 2 <canvas id="myCanvas2" width="200" height="100" style="border:1px solid #c3c3c3;"></canvas>
 3 <script type="text/javascript">
 4 var c=document.getElementById("myCanvas2");
 5 var cxt=c.getContext("2d");
 6 cxt.fillStyle="FF0000";
 7 cxt.beginPath();
 8 cxt.arc(70,18,15,0,Math.PI*2,true);
 9 cxt.closePath();
10 cxt.fill();
11 
12 </script>
13 
14 </body>

4.颜色渐变

 1 <body><canvas id="myCanvas3" width="200" height="100" style="border:1px solid #c3c3c3;">
 2 Your broswer does not support the canvas element.
 3 </canvas>
 4 
 5 <script type="text/javascript">
 6 var c=document.getElementById("myCanvas3");
 7 var cxt=c.getContext("2d");
 8 var grd=cxt.createLinearGradient(0,0,175,50);
 9 grd.addColorStop(0,"#FF0000");
10 grd.addColorStop(1,"#00FF00");
11 cxt.fillStyle=grd;
12 cxt.fillRect(0,0,175,50);
13 </script>
14 </body>

5.插入图片（注意图片尺寸）

 1 <body>
 2 <canvas id="myCanvas4" width="400" height="600" style="border:1px solid #c3c3c3;">
 3 Your broswer does not support the canvas element.
 4 
 5 </canvas>
 6 
 7 <script type="text/javascript">
 8 var c=document.getElementById("myCanvas4");
 9 var cxt=c.getContext("2d");
10 var img=new Image();
11 img.src="images/apple.jpg";
12 
13 img.onload=function(){
14      cxt.drawImage(img,0,0);
15 }
16 
17 </script>
18 
19 
20 </body>