JS绘图基本流程如下:
- JS通过id寻找到canvas元素,如下代码:
var c=document.getElementById('myCanvas')
- 创建context对象,如下代码:
var cxt=c.getContext('2d')
2d是唯一的一个函数参数,将来可能支持3D绘图,所有的绘图工作就在context对象上完成了
canvas绘图相关对象
- cxt.beginPath() 开始绘制路径
- cxt.closePath() 结束绘制路径
- cxt.stroke() 真正的绘图
- cxt.strokeStyle=’#fff’, 设置边框颜色
- cxt.lineWidth=2, 设置边框大小
- cxt.fillStyle=’red’,设置内容填充区域颜色
- cxt.arc(x,y,radius,startAngle,endAngle,true/false),绘制圆形路径,参数分别为,圆心坐标(x,y),开始和结束角度,顺时针/逆时针
- cxt.strokeRect(x,y,width,height),绘制矩形路径
- cxt.fillRect(x,y,width,height),绘制矩形图形
- cxt.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd),径向渐变范围设置
- cxt.createLinearGradient(xStart,yStart,xEnd,yEnd),线性渐变范围设置
html代码:
<body>
<p>
<span onclick="btn1_click();" onmouseover="this.style.cursor='pointer';">实体圆</span>
<span onclick="btn2_click();" onmouseover="this.style.cursor='pointer';">边框圆</span>
<span onclick="btn3_click();" onmouseover="this.style.cursor='pointer';">衔接圆</span>
<span onclick="btn4_click();" onmouseover="this.style.cursor='pointer';">渐变圆</span>
</p>
<canvas id="myCanvas" width="400px" height="400px"></canvas>
</body>
js代码:
<script type="text/javascript">
function $(id)
{
return document.getElementById(id);
}
function btn1_click(){
var cvs=$('myCanvas');
var cxt=cvs.getContext('2d');
cxt.clearRect(0,0,400,400);
cxt.beginPath();
cxt.arc(100,100,50,0,Math.PI*2,true);
cxt.closePath();
cxt.fillStyle='#eee';
cxt.fill();
}
function btn2_click(){
var cvs=$('myCanvas');
var cxt=cvs.getContext('2d');
cxt.clearRect(0,0,400,400);
cxt.beginPath();
cxt.arc(100,100,50,0,Math.PI*2,true);
cxt.closePath();
cxt.strokeStyle='#666';
cxt.lineWidth=2;
cxt.stroke();
}
function btn3_click(){
var cvs=$('myCanvas');
var cxt=cvs.getContext('2d');
cxt.clearRect(0,0,400,400);
cxt.beginPath();
cxt.arc(100,100,50,0,Math.PI*2,true);
cxt.closePath();
cxt.strokeStyle='#666';
cxt.lineWidth=2;
cxt.fillStyle='#eee';
cxt.fill();
cxt.stroke();
cxt.beginPath();
cxt.arc(180,100,50,0,Math.PI*2,true);
cxt.closePath();
cxt.strokeStyle='#666';
cxt.lineWidth=2;
cxt.stroke();
}
function btn4_click(){
var cvs=$('myCanvas');
var cxt=cvs.getContext('2d');
cxt.clearRect(0,0,400,400);
cxt.beginPath();
cxt.arc(100,100,50,0,Math.PI*2,true);
cxt.closePath();
cxt.strokeStyle='#666';
cxt.lineWidth=2;
var gnt=cxt.createRadialGradient(100,100,0,100,100,250);
gnt.addColorStop(0,'#f00');
gnt.addColorStop(0.3,'#0f0');
gnt.addColorStop(1,'#00f');
cxt.fillStyle=gnt;
cxt.fill();
}
</script>
效果图:
图形添加阴影效果:
var cvs=$('myCanvas');
var cxt=cvs.getContext('2d');
cxt.shadowOffsetX=6;//x方向阴影距离
cxt.shadowOffsetY=6;//y方向阴影距离
cxt.shadowColor='#ccc';// 阴影颜色
cxt.shadowBlur=10;//阴影模糊度
cxt.fillStyle='#eee';
cxt.fillRect(100,100,100,100);
移动,旋转,缩放图形:
cxt.translate(150,150);//移动画布,(150,150)处变成坐标原点
cxt.scale(1.2,1.2);//缩放图形,同时原来的坐标位置距离也会被缩放
cxt.rotate(-Math.PI/4);//旋转画布