[Pro HTML5 Programming] 绘制栅格图 Canvas API 博客分类： HTML5
程序员文章站
2024-03-11 12:42:19
...
1、使用Canvas
在HTML页面添加<canvas></canvas>标签，然后用javascript控制它。
javascript控制操作canvas步骤：通过id获取canvas对象以及上下文、在上下文中操作canvas、绘制图像。
2、检查浏览器是否支持Canvas
<script>
try{
document.createElement('canvas').getContext('2d');
document.getElementById('support').innerHTML = 'HTML5 Canvas is supported';
}catch(e){
document.getElementById('support').innerHTML = 'HTML5 Canvas is unsupported';
}
</script>
<body>
<span id='support'></span>
</body>
3、Canvas标签
<canvas id="diagonal" style="border:1px solid;" width="200" height="200"></canvas> //带边框的canvas元素 <canvas width="200" height="200"></canvas> // 无边框的canvas元素
可以通过id获取Canvas对象
4、通过javascript控制Canvas
绘制一条直线
<script>
function drawDiagonal()
{
var canvas=document.getElementById('diagonal_line'); //获得canvas对象
var context=canvas.getContext('2d'); //获取canvas的上下文
//用绝对坐标来创建一条路径
context.beginPath();
context.moveTo(0,0);//将光标左上角(0,0)
context.lineTo(140,70);//直线路径，移到(140,70)
//将这条线绘制到canvas上
context.stroke(); //调用stroke或fill才会绘制
}
window.addEventListener("load",drawDiagonal,true);
</script>
<body>
<canvas id="diagonal" style="border:1px solid;" width="200" height="200"></canvas>
</body>
5、绘制一棵小树
<script type="text/javascript">
function createCanopyPath(context){
//开始创建路径
context.beginPath();
context.moveTo(-25,-50); //移到第一个点
context.lineTo(-10,-80); //连接直线
context.lineTo(-20,-80);
context.lineTo(-5,-110);
context.lineTo(-15,-110);
context.lineTo(0,-140);
context.lineTo(15,-110);
context.lineTo(5,-110);
context.lineTo(20,-80);
context.lineTo(10,-80);
context.lineTo(25,-50);
context.closePath(); //将最后一个点与起始点相连
}
function drawTrails(){
//获取canvas对象
var canvas=document.getElementById('diagonal');
var context=canvas.getContext('2d');
//保存上下文，通过restore可得到保存的状态
context.save();
//将上下文平移到(130,250)
context.translate(130,250);
//创建路径
createCanopyPath(context);
//设置描边信息
context.lineWidth=4; //加宽线条
context.lineJoin='round'; //平滑连点
context.strokeStyle='#663300'; //颜色设置成棕色
context.stroke(); //画边
//设置填充信息
context.fillStyle='#339900'; //填充颜色
context.fill(); //用颜色填充
//使用渐变方式填充
var trunkGradient=context.createLinearGradient(-5,-50,5,50); //创建水平渐变对象
trunkGradient.addColorStop(0,'#663300'); //这只渐变颜色
trunkGradient.addColorStop(0.4,'#996600');
trunkGradient.addColorStop(1,'#552200');
context.fillStyle=trunkGradient; //填充方式为渐变填充
context.fillRect(-5,-50,10,50); //用渐变填充矩形
var canopyShadow=context.createLinearGradient(0,-50,0,0); //创建垂直渐变对象
canopyShadow.addColorStop(0,'rgba(0,0,0,0.5)'); //0位置的渐变色是50%透明的黑色
canopyShadow.addColorStop(0.2,'rgba(0,0,0,0)'); //0.2位置是黑色
context.fillStyle=canopyShadow; //填充方式为渐变填充
context.fillRect(-5,-50,10,50);
//恢复上下文的状态
context.restore();
context.save();
context.translate(-10,350);
//画曲线
context.beginPath();
context.moveTo(0,0);
context.quadraticCurveTo(170,-50,260,-190);
context.quadraticCurveTo(310,-250,410,-250);
//用图片填充，createPattern返回一个CanvasPattern 对象，该对象表示一个贴图图像所定义的模式。可用作stokeStyle或fillStyle 属性的值。
context.strokeStyle=context.createPattern(gravel,'repeat');
context.lineWidth=20;
context.stroke();
context.restore();
}
var gravel=new Image();
gravel.src="gravel.jpg";
//图片加载完成后，将其显示在canvas上.
gravel.onload=function(){
drawTrails();
}
window.addEventListener("load",drawTrails,true);
</script>
<body>
<canvas id="diagonal" style="border:1px solid;" width="500" height="500"></canvas>
</body>
效果为：
6、改进小树
<script type="text/javascript">
function createCanopyPath(context){
//开始创建路径
context.beginPath();
context.moveTo(-25,-50); //移到第一个点
context.lineTo(-10,-80); //连接直线
context.lineTo(-20,-80);
context.lineTo(-5,-110);
context.lineTo(-15,-110);
context.lineTo(0,-140);
context.lineTo(15,-110);
context.lineTo(5,-110);
context.lineTo(20,-80);
context.lineTo(10,-80);
context.lineTo(25,-50);
context.closePath(); //将最后一个点与起始点相连
}
function drawTrails(){
//获取canvas对象
var canvas=document.getElementById('diagonal');
var context=canvas.getContext('2d');
context.save();
context.translate(-10,350);
//画曲线
context.beginPath();
context.moveTo(0,0);
context.quadraticCurveTo(170,-50,260,-190);
context.quadraticCurveTo(310,-250,410,-250);
context.strokeStyle=context.createPattern(gravel,'repeat');
context.lineWidth=20;
context.stroke();
context.restore();
//绘制第一棵树
context.save();
context.translate(100,250);
drawTree(context);
context.restore();
//绘制第二棵树
context.save();
context.translate(320,450);
context.scale(2,2); //放大两倍
drawTree(context);
context.restore();
//绘制第三棵树，倒了
context.save();
context.translate(150,400);
context.scale(1.5,1);
context.rotate(1.57);
drawTree(context);
context.restore();
drawText(context,'Happy Trails!');
}
function drawTree(context){
//使用渐变方式填充
var trunkGradient=context.createLinearGradient(-5,-50,5,50); //创建水平渐变对象
trunkGradient.addColorStop(0,'#663300'); //这只渐变颜色
trunkGradient.addColorStop(0.4,'#996600');
trunkGradient.addColorStop(1,'#552200');
context.fillStyle=trunkGradient; //填充方式为渐变填充
context.fillRect(-5,-50,10,50); //用渐变填充矩形
var canopyShadow=context.createLinearGradient(0,-50,0,0); //创建垂直渐变对象
canopyShadow.addColorStop(0,'rgba(0,0,0,0.5)'); //0位置的渐变色是50%透明的黑色
canopyShadow.addColorStop(0.2,'rgba(0,0,0,0)'); //0.2位置是黑色
context.fillStyle=canopyShadow; //填充方式为渐变填充
context.fillRect(-5,-50,10,50);
//创建路径
createCanopyPath(context);
//设置描边信息
context.lineWidth=4; //加宽线条
context.lineJoin='round'; //平滑连点
context.strokeStyle='#663300'; //颜色设置成棕色
context.stroke(); //画边
//设置填充信息
context.fillStyle='#339900'; //填充颜色
context.fill(); //用颜色填充
//设置阴影
context.save();
context.transform(1,0,-0.5,1,0,0); //借助拉伸变换，产生倾斜
context.scale(1,0.6); //高度为60%
context.fillStyle='rgba(0,0,0,0.2)'; //透明度为20%
context.fillRect(-5,-50,10,50);
createCanopyPath(context);
context.fill();
context.restore();
}
function drawText(context,text){
context.save();
//指定字体大小，并且指定字体库
context.font="60px impact";
context.fillStyle='#996600';
context.textAlign='center';
//添加字体的阴影
context.shadowColor='rgba(0,0,0,0.2)';
context.shadowOffsetX=15;
context.shadowOffsetY=-10;
context.shadowBlur=2;
//The fillText method takes four parameters (text,x,y,maxWidth).
context.fillText(text,200,60,400);
context.restore();
}
var gravel=new Image();
gravel.src="gravel.jpg";
//图片加载完成后，将其显示在canvas上.
gravel.onload=function(){
drawTrails();
}
window.addEventListener("load",drawTrails,true);
</script>
<body>
<canvas id="diagonal" style="border:1px solid;" width="500" height="500"></canvas>
</body>
![[Pro HTML5 Programming] 绘制栅格图 Canvas API
博客分类： HTML5](http://dl2.iteye.com/upload/attachment/0107/5066/187188b8-3576-3139-8302-6a8ed05da8bd.png "[Pro HTML5 Programming] 绘制栅格图 Canvas API
博客分类： HTML5")
![[Pro HTML5 Programming] 绘制栅格图 Canvas API
博客分类： HTML5](http://dl2.iteye.com/upload/attachment/0107/5074/21df4764-1e55-3f72-b229-1c64c3cb334d.png "[Pro HTML5 Programming] 绘制栅格图 Canvas API
博客分类： HTML5")