图形API(一）"/>
canvas绘制图形API(一）
canvas元素的基础知识
canvas元素是HTML5中的一个新增的重要元素，专门用来绘制图形。在页面上放置一个canvas元素，就相当于在页面上放置了一块“画布”，可以在其中进行图形的描绘。但是，在canvas元素中进行绘画，并不是拿鼠标来作画。事实上，canvas元素只是一块无色透明的区域，需要利用JavaScript编写在其中进行绘画的脚本。
1. 用canvas元素基本知识
1）取得canvas元素：使用document.getElementById等方法取得canvas对象。
2）取得上下文（context):使用canvas对象的getContext方法来获得。
3）填充与绘制边框：结合使用fill和stroke方式绘制图形。
4）设定绘图样式（style)
fillStyle:填充的样式，填入颜色值
strokeStyle：图形边框的样式，填入颜色值。
5）指定线宽：lineWidth
6)指定颜色值
7）绘制矩形
context.fillRect(x,y,width,height)
context.strokeRect(x,y,width,height)
x-横坐标，y-纵坐标，width-矩形宽带，height-矩形高度，坐标原点为canvas画布的最左上角。
2. 利用canvas绘制矩形
HTML代码:
<!DOCTYPE html><head><meta charset="UTF-8"><title>demo</title><script src="demo.js"></script></head>
<body onload="draw('canvas');">
<h1>canvas元素示例</h1>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>
js代码:
function draw(id){
var canvas=document.getElementById(id);
if (canvas == null) {return false
}
var context= canvas.getContext('2d');
context.fillStyle="#EEEEFF";
context.fillRect(0,0,400,300);
context.fillStyle="#D620E8";
context.strokeStyle="#2AC773";
context.lineWidth=1;
context.fillRect(50,50,100,100);
context.strokeRect(50,50,100,100);}
运行结果：
3.canvas 绘制圆形
1）开始创建路径：context.beginPath();该方法不使用参数
2)创建圆形路径：用arc方法
context.arc(x,y,radius,startAngle,endAngle,anticlockwise);
x-绘制圆形的起点坐标，y-绘制圆形的终点坐标，radius-圆形半径，startAngle-开始角度，endAngle-结束角度，anticlockwise-布尔值参数，值为true时按顺指针绘制，值为false时按逆时针绘制。
3)关闭路径
context.closePath();
4）设定绘制样式，进行图形绘制
HTML代码与上面一样。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title><style>#div{width: 1000px;position: relative;left: 300px;}</style><script src="demo.js"></script>
</head>
<body onload="draw('canvas');"><div id="div"><h1>canvas moveTo与lineTo示例</h1><canvas id="canvas" width="400" height="300"></canvas></div>
</body>
</hml>
js代码：
function draw(id){var canvas=document.getElementById(id);if(canvas==null){return false;
}var context=canvas.getContext('2d');context.fillStyle='#eeeeff';context.fillRect(0,0,400,300);for(var i=0;i<10;i++){//开始创建路径context.beginPath();//绘制路径context.arc(i*25,i*25,i*10,0,Math.PI*2,true);//关闭路径context.closePath();//进行图形绘制context.fillStyle='rgba(255,0,0,0.15)';context.fill();}
}
运行结果:
4. moveTo与lineTo
1.moveTo(x,y)
moveTo方法将光标移动到指定坐标点，绘制直线的时候以这个坐标点为起点。x表示指定坐标点的横坐标，y表示指定坐标点的纵坐标。
2.lineTo(x,y)
lineTo方法在moveTo方法中指定的直线起点与参数中指定的直线终点之间绘制一条直线，x表示直线重点的横坐标，y表示直线终点的纵坐标。
js代码如下：
function draw(id){
var canvas=document.getElementById(id);
if (canvas == null) {return false
}
//创建canvas对象
var context= canvas.getContext('2d');
//设置填充颜色
context.fillStyle="#EEEEFF";
//填充路径
context.fillRect(0,0,400,300);
var dx=150,dy=150,s=150;
context.beginPath();
context.fillStyle='rgb(100,255,100)';
context.strokeStyle='rgb(0,0,100)';
var dig=Math.PI/15*11;
for(var i=0;i<30;i++){var x=Math.sin(i*dig);var y=Math.cos(i*dig);context.lineTo(dx+x*s,dy+y*s);
}
context.closePath();
context.fill();
context.stroke();
}
运行结果：
5.canvas绘制渐变图形
canvas 绘制线性渐变
1）创建LinearGradient对象,绘制线性渐变。
context.createLinearGradient(xStart,yStart,xEnd,yEnd);
xStart-渐变起始地点的横坐标，yStart-渐变起始地点的纵坐标，xEnd-渐变结束地点的横坐标，yEnd-渐变结束地点的纵坐标
2）设定渐变的颜色
context.addColorStop(offset,color);
offset-设定的颜色离开渐变起始点的偏移量，该参数的值是一个范围0到1的浮点值
js代码如下：
function draw(id){
var canvas=document.getElementById(id);
if (canvas == null) {return false
}
//创建canvas对象
var context= canvas.getContext('2d');
var g1=context.createLinearGradient(0,0,0,300);
g1.addColorStop(0,'rgb(255,255,0)');
g1.addColorStop(1,'rgb(0,255,255)');
//设置填充颜色
context.fillStyle=g1;
//填充路径
context.fillRect(0,0,400,300);
var g2=context.createLinearGradient(0,0,300,0);
g2.addColorStop(0,'rgba(0,0,255,0.5)');
g2.addColorStop(1,'rgba(255,0,0,0.5)');
for(var i=0;i<10;i++){context.beginPath();context.fillStyle=g2;context.arc(i*25,i*25,i*10,0,Math.PI*2,true);context.closePath();context.fill();
}}
运行结果：
canvas绘制径向渐变
径向渐变是指沿着圆形的半径方向向外进行扩散的渐变方式。比如在描绘太阳时，沿着太阳的半径方向向外扩散出去的光晕，就是一种径向渐变。
使用图形上下文的createRadialGradient方法绘制径向渐变，该方法的定义如下所示：
context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd);xStart–渐变开始圆的圆心横坐标,yStart–渐变开始时圆的圆心纵坐标
radiusStart–为开始时圆的半径,xEnd–渐变结束圆的圆心横坐标，
yEnd–渐变结束圆的圆心纵坐标，radiusEnd–结束圆的半径
js代码：
function draw(id){
var canvas=document.getElementById(id);
if (canvas == null) {return false
}
//创建canvas对象
var context= canvas.getContext('2d');
var g1=context.createRadialGradient(400,0,0,400,0,400);
g1.addColorStop(0.1,'rgb(255,255,0)');
g1.addColorStop(0.3,'rgb(255,0,255)');
g1.addColorStop(1,'rgb(0,255,255)');
//设置填充颜色
context.fillStyle=g1;
//填充路径
//context.fillRect(0,0,400,300);
var g2=context.createRadialGradient(250,250,0,250,250,300);
g2.addColorStop(0.1,'rgba(255,0,0,0.5)');
g2.addColorStop(0.7,'rgba(255,255,0,0.5)');
g2.addColorStop(1,'rgba(0,0,255,0.5)');
for(var i=0;i<10;i++){context.beginPath();context.fillStyle=g2;context.arc(i*25,i*25,i*10,0,Math.PI*2,true);context.closePath();context.fill();
}}
运行结果：
6.绘制变形图形
坐标变换
1）平移
context.translate(x,y);
x-将坐标轴原点向左移动x个单位,y-将坐标轴原点向下移动y个单位,单位默认情况下是像素。
2）扩大
context.scale(x,y);
x-水平方向的放大倍数，y-垂直方向的放大倍数。
3）旋转
context.rotate(angle);
angle-顺时针旋转的角度，要想逆时针选择，将angle设定为负数即可。
示例代码：
function draw(id){
var canvas=document.getElementById(id);
if (canvas == null) {return false
}
var context= canvas.getContext('2d');
context.fillStyle='#EEEEFF ';
context.fillRect(0,0,400,300);
//图形绘制
context.translate(200,50);
context.fillStyle='rgba(255,0,0,0.25)';
for(var i=0;i<50;i++){context.translate(25,25);context.scale(0.95,0.95);context.rotate(Math.PI/10);context.fillRect(0,0,100,50);
}}
运行结果：
矩阵变换
使用图形上下文对象的transforms方法修改变换矩阵,该方法的定义如下：
context.transform(m11,m12,m21,m22,dx,dy);
其中m11,m21,m12,m22四个参数用来修改使用这个方法之后，绘制图形时的计算方法，以达到变形的目的，dx与dy参数移动坐标原点，dx表示将坐标原点在x轴上向右移动x个单位，默认情况下以像素为单位，dy表示将坐标原点在y轴上向下移动y个单位。
更多推荐
canvas绘制图形API(一）
发布评论