html用canvas绘制图形,HTML5 canvas绘制图形(示例代码)

demo.html

canvas

你的浏览器不支持canvas

demo.js

window.οnlοad=function() {

createcanvas();

drawcanvas();

}

function createcanvas() {

var CANVAS=document.getElementById(\'mycanvas\');

context=CANVAS.getContext(\'2d\');

}

function drawcanvas() {

context.fillStyle="#eeeeef";

context.fillRect(0,0,600,800);

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();

}

}

效果：

2017-09-08  08:36:44