您的位置：首页 > Web前端 > HTML5

第二讲：使用HTML5绘制简单的图形

2014-06-06 16:40 627 查看

<html>
<head>
<title>初识canvas</title>
<script src="../js/jscex.jscexRequire.min.js" type="text/javascript"></script>
</head>

<body>
<canvas id="mc" width="900px" height="440px" style="border:1px solid #c3c3c3;background-color:#fff;border-radius:10px;">
</canvas>
<script type="text/javascript">
var canvas = document.getElementById('mc');
var ctx = canvas.getContext('2d');
//画出指定的图像
var somethingAsync = eval(Jscex.compile("async",function(){
//绘制坐标线
ctx.moveTo(0,200);
ctx.lineTo(900,200);
ctx.stroke();
ctx.moveTo(300,0);
ctx.lineTo(300,440);
ctx.stroke();
for(var i = 5; i <= 100; i=i+5){
$await(Jscex.Async.sleep(1000));
ctx.strokeStyle = randomColor();
//绘制上边的半圆
ctx.beginPath();
ctx.arc(300,200-i,i,0,Math.PI*1,true);
ctx.stroke();
//绘制左边的半圆
ctx.strokeStyle = randomColor();
ctx.beginPath();
ctx.arc(300-i,200,i,Math.PI*0.5,Math.PI*1.5,false);
ctx.stroke();
//绘制下边的半圆
ctx.strokeStyle = randomColor();
ctx.beginPath();
ctx.arc(300,200+i,i,0,Math.PI,false);
ctx.stroke();
//绘制右边的半圆
ctx.strokeStyle = randomColor();
ctx.beginPath();
ctx.arc(300+i,200,i,Math.PI*0.5,Math.PI*1.5,true);
ctx.stroke();
}
}))

//随机生成颜色
function randomColor(){
var arr = ["0","1","2","3","4","5","6","7","8","9","A","B","C","D","F"];
var str = "#";
var index;
for (var i = 0; i < 6; i++) {
index = Math.round(Math.random()*15);//随机生成一个下表
str += arr[index];
}
return str;
}
somethingAsync().start();

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航