canvas实例

学习

发布日期: 2020-09-05

更新日期: 2023-11-25

文章字数: 130

阅读时长: 1 分

阅读次数:

效果图：

1
2
3

    <!--body中加入onload="draw('canvas');"-->
    <h1>canvas元素实例</h1>
<canvas id="canvas" width="400" height="300"></canvas>

function draw(id){
var canvas=document.getElementById(id);
if(canvas==null)
return false;
var context=canvas.getContext('2d');
context.fillStyle="#EEEEFF";
context.fillRect(0,0,400,300);
/*context.fillStyle="red";
context.strokeStyle="blue";
context.lineWidth=1;
context.fillRect(50,50,100,100);
context.strokeRect(50,50,100,100);*///注释部分为矩形
var n=0;//圆形
for(var i=0;i<10;i++){
context.beginPath();
context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
context.closePath();
context.fillStyle='rgba(255,0,0,0.25)';
context.fill();
}
}