canvas入门（画圆）

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

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

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

 var canvas = document.getElementById("myCanvas");

 canvas.width =400;

 canvas.height =400;          //canvas会覆盖页面的一个区域，同时也会阻止这个区域事件发生，所以在处理canvas区域的时候要慎重处理。
//canvas对象的颜色和阴影透明度属性，模块。

2.阴影处理API

context.shadowColor = 'rgba(50, 50, 50, 1.0)';

context.shadowOffsetX = 5;

context.shadowOffsetY = 5;

context.shadowBlur = 10;
context.lineWith = 10;当前线条的宽度，以像素计。
//获得画布的像素，ImageData对象，三个Api,
context.createImageData
context.getImageData
context.setImageData

3.画圆

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入门（画圆）

相关文章