码迷,mamicode.com
首页 > 其他好文 > 详细

canvas绘制圆

时间:2014-09-16 22:00:21      阅读:288      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   ar   2014   div   sp   

canvas绘制圆:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas绘制圆</title>
<style>
canvas{border:1px solid black;}
</style>
<script>
window.onload=function(){
    var ctx=document.getElementById(sample).getContext(2d);
    /*圆1*/
    ctx.beginPath();
    ctx.arc(150,45,35,0,Math.PI*2,false);
    ctx.fillStyle="rgba(198,80,77,0.7)";  // 半透明红色
    ctx.fill();
    ctx.strokeStyle="rgba(198,80,77,1)" ;  //红色
    ctx.stroke();
    
    /*圆2*/
    ctx.beginPath();
    ctx.arc(125,95,35,0,Math.PI*2,false);
    ctx.fillStyle="rgba(155,187,89,0.7)";  // 半透明绿色
    ctx.fill();
    ctx.strokeStyle="rgba(155,187,89,1)";   //绿色
    ctx.stroke();
    
    /*圆3*/
    ctx.beginPath();
    ctx.arc(175,95,35,0,Math.PI*2,false);
    ctx.fillStyle="rgba(128,100,162,0.7)";  // 半透明紫色
    ctx.fill();
    ctx.strokeStyle="rgba(128,100,162,1)" ;  //紫色
    ctx.stroke();
    }
</script>
</head>

<body>
<canvas id="sample" width="300" height="150"></canvas>
</body>
</html>

bubuko.com,布布扣

 

canvas绘制圆

标签:style   blog   http   color   io   ar   2014   div   sp   

原文地址:http://www.cnblogs.com/hiphop-J/p/3975861.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!