效果图:

    <!--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();
		}
	}
届ける言葉を今は育ててる
最后更新于 2020-07-11