|
添加canvas元素,以及获得渲染上下文context.
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');// 获得上下文；
●绘制矩形
绘制矩形常用方法： 1: fillRect() 以当前的fillStyle属性值来填充 2: strokeRect() 以当前strokeStyle属性值来填充 3:clearRect() 清除某一区域 三个方法参数完全相同:(x,y,width,height) x,y表示绘制的起始点，width,height表示绘制矩形的宽高。
var canvas = document.getElementById('mycanvas');
// 获取上文对象
var ctx = canvas.getContext('2d');
ctx.fillStyle = "#ccc";// 设置填充颜色
ctx.fillRect(0,0,300,100);// 绘制一个矩形
ctx.fillStyle = "pink";// 设置填充颜色
ctx.strokeStyle = "black"; // 设置边框颜色
ctx.lineWidth = 10;// 设置边框宽度
ctx.fillRect(40,20,220,60);
ctx.strokeRect(40,20,220,60);
ctx.clearRect(100,35,30,30);// 清除指定区域
ctx.fillStyle = "lightblue";
ctx.fillRect(100,35,30,30);
 canvas绘图的基本方法：
开始创建路径beginPath()必须调用， 1：lineTo(x,y) : 指定目标坐标(x,y),且在两坐标之间画一条直线。 2：moveTo(x,y): 指定绘制的起始点，但不绘制 3：rectRect(x,y,width,height): 在(x,y)处绘制一个宽为width,高为height的矩形，与fillRect()和strokeRect()不一样的是：这个函数创建的是一个路径，而不是单独的形状。 4：arc(x,y,radius,startAngle,endAngle,boolean)：绘图中心在(x,y)的弧，半径是radius，角度在startAngle与endAngle之间，最后一个参数布尔类型，true为顺时针。 5：arcTo(x1,y1,x2,y2,radius):绘制从上一条经过(x1,y1)到(x2,y2)的弧，radius表示半径。 6：fill()：使用fillStyle属性值来填充一个子路径 7：stroke():使用lineWidh、lineCap、lineJoin和strokeStyle对所有子路径进行填充 8：closePath():关闭路径 9: clip()：使用计算所有的子路径而建立新的剪切区，未闭合的子路径在填充时按闭合方式填充，但不影响实际的子路径集合，新的剪切区域将替换当前的剪切区域。 10: lineCap属性：指定线条末端的样式 1：butt:每根线的头和尾都是长方形 2：round：每根线的头和尾都是半圆形的箭头 3：square：每根线的头和尾都增加一个长方形，长度为线的宽一半，高度为线的宽。 11：lineJoin属性：修改当前形状中的线段的连接方式，让拐角变得更圆滑。
●绘制直线 
var canvas = document.getElementById('mycanvas');
if(canvas.getContext)
{
var ctx = canvas.getContext('2d');
var width = canvas.width;
var height = canvas.height;
ctx.beginPath();
ctx.lineWidth = 12;
ctx.moveTo(0,0);
// 用直线画出矩形
ctx.lineTo(width,0);
ctx.lineTo(width,height);
ctx.lineTo(0,height);
ctx.lineTo(0,0);
ctx.lineCap = 'round';// 每个线条的头和尾都增加一个半圆形的箭头
ctx.stroke();// 用来填充线条
}
canvas.addEventListener('click',function(event){
var event = event || window.event;
ctx.moveTo(event.clientX,event.clientY);
ctx.lineTo(0,0);
ctx.stroke();
});
●绘制圆形 
var canvas = document.getElementById('mycanvas');
if(canvas.getContext)
{
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.fillStyle = '#202020';// 填充颜色
ctx.arc(80,80,80,0,Math.PI*2,true);//绘制圆形
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.arc(240,80,80,0,Math.PI/2 ,false);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.arc(470,80,80,(Math.PI*120/180),0,true);
ctx.fill();
}
●绘制三角形
var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.lineTo(20,20);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.fillStyle = '#06F';
ctx.moveTo(40,120);
ctx.lineTo(120,40);
ctx.lineTo(120,120);
ctx.fill();
●绘制弧线 
var canvas = document.getElementById('mycanvas');
if(canvas.getContext)
{
var ctx = canvas.getContext('2d');
var x0 = 50,y0 = 50,x1 = 500,y1 = 50,x2 = 250,y2 = 150;
ctx.beginPath();
ctx.moveTo(x0,y0);
ctx.strokeStyle = '#f00';
ctx.lineWidth = 2;
ctx.arcTo(x1,y1,x2,y2,10);//绘制从一起点到(x1,y1),再经过(x1,y1)到(x2,y2)的弧长,30表示半径
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.strokeStyle = 'rgba(0,0,0,0.5)';
ctx.lineWidth = 1;
ctx.moveTo(x0,y0);
ctx.lineTo(x1,y1);
ctx.fillText("x1,y1",x1 + 10,y1 + 10);
ctx.lineTo(x2,y2);
ctx.fillText("x2,y2",x2 + 10,y2 + 10);
ctx.stroke();
canvas.addEventListener('click',function(event){
var event = event || window.event;
alert(event.clientX)
});
|