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

canvas入门(画圆)

时间:2015-10-28 12:09:23      阅读:212      评论:0      收藏:0      [点我收藏+]

标签:

1.想在H5上画一个canvas,必须在页面上你需要的地方添加canvas标签,

1 <canvas id="myCanvas"></canvas>                   

接着需要给canvas赋值高度和宽度。

1 var canvas = document.getElementById("myCanvas");     
2 canvas.width =400;                   
3 canvas.height =400;          //canvas会覆盖页面的一个区域,同时也会阻止这个区域事件发生,所以在处理canvas区域的时候要慎重处理。

2.画圆

var ctx = canvas.getContext("2d");      //返回CanvasRenderingContext2D 对象,canvas画图是通过这个对象来画的。
//开始一个新的绘制路径
ctx.beginPath();                        
//设置弧线的颜色为蓝色
ctx.strokeStyle = "blue";
//沿着坐标点(100,100)为圆心
ctx.arc(circle.x, circle.y, circle.r,0,2*Math.PI,true);   画圆6个参数,圆心坐标、半径、起始和终止的角度。最后一个规定应该逆时针还是顺时针绘图。False = 顺时针,true = 逆时针
ctx.closePath();
ctx.fillStyle = ‘rgb(200,0,200)‘;
ctx.fill();

  

canvas入门(画圆)

标签:

原文地址:http://www.cnblogs.com/liuyinlei/p/4916571.html

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