脚本宝典收集整理的这篇文章主要介绍了html5教程-HTML5 学习手笔二:canvas API 绘制树形图案A,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。
上篇通过对canvas 画对角线,
了解了一些canvas画图基本原理。现在可以
利用HTML5 canvas
API创建一个场景:带有长跑跑道的树林。
&nbs
p; 本篇大纲
用canvas API
绘制树木的树冠
为树冠的边框架
加粗并且填充树冠颜色
为树冠
创造一个强大的树干
绘制跑道
用canvas API绘制树木的树冠
原理还是与上篇画对角线一样,只是步骤增多而已,先看代码:
<script ty
PE="text/javascript">
function createCanopyPath(context){
context.be
ginPath();
context.moveTo(-25,-50);
context.l
ineto(-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 drawTr
ails(){
VAR canvas=document.getElementById(&
#39;diagonal');
var context=canvas.getContext('2d');
context.save();
context.translate(130,250);
createCanopyPath(context);
context.
stroke();
context.re
Store();
}
window.addEventListener("load",drawTrails,true);
</script>
DEMO效果如下:
上面的代码中有一个特殊的函数叫做closePath。这个函数的行为同lineTo很像,唯一的差别在于closePath会将路径的起始坐标自动作为目标坐标。closePath还会通知canvas当前绘制的图形己经闭合
或者形成了完全封闭的区域。
为树冠的边框架加粗并且填充树冠颜色
为了使树冠更加形象并且看起来像真的树,不得不利用canvas 的API绘制其图形
外观,代码如下:
function drawTrails(){
var canvas=document.getElementById('diagonal');
var context=canvas.getContext('2d');
context.save();
context.translate(130,250);
createCanopyPath(context);
//加
宽线条
context.lineWidth=4;
//
平滑路径的接合点
context.lineJoin='round';
//将颜色改成棕色
context.strokeStyle='#663300';
//将填充色设置为绿色并填充树冠
context.fillStyle='#339900';
context.fill();
context.stroke();
context.restore();
}
DEMO效果见下面运行效果:
lineJoin属性设置为round,这是修改当前形状中线段的连接方式,让拐角变得更加油;也可以把lineJoin属性设置成bevel或者m
ITer来变换拐角样式。
strokeStyle属性是为了
改变线条颜色。
fillStyle属性是为了设置填充颜色
context 的fill 函数是为了可以让canvas对当前图形中所有的闭合路径内部的像素点进行填充,配合fillStyle 填充内部像形点颜色。
为树冠创造一个强大的树干
创建树干有两种方法:
用我们上面学过的使用线条然后配合closePath画树干
HT
ML5 提供了一个强大的填充矩形的函数fillRect 可以画
一块矩形x轴、y轴、需要画的宽度和高度即可
在这里我们使用fillRect 来构建树干。代码如下:
context.fillStyle='#663300';
context.fillRect(-5,-50,10,50);
效果DEMO如下:
www.2cto
.COM:作者图片失效
与fillRect相关的函数还有:strokeRect和clearRect。strokeRect的作用是基于给出的位置和坐标画出矩形的轮廓,clearRect的作用是清除矩形区域内的所有内容并将它恢复到初始状态,即透明。
绘制跑道
完
成本篇最后一个功能,在小树旁边画上一个跑道。代码如下:
function drawTrails(){
var canvas=document.getElementById('diagonal');
var context=canvas.getContext('2d');
context.save();
context.translate(130,250);
createCanopyPath(context);
//加宽线条
context.lineWidth=4;
//平滑路径的接合点
context.lineJoin='round';
//将颜色改成棕色
context.strokeStyle='#663300';
//将填充色设置为绿色并填充树冠
context.fillStyle='#339900';
context.fill();
context.fillStyle='#663300';
context.fillRect(-5,-50,10,50);
context.stroke();
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);
context.strokeStyle='#663300';
context.lineWidth=20;
context.stroke();
context.restore();
}
quadraticCurveTo函数绘制曲线的起点是当前坐标,带有两组(x,y)参数。第二组是指曲线的终点。第一组代表控制点。所谓的控制点位于曲线的旁边,其作用相当于对曲线产生一个拉力。通过高速控制点的位置,就可以改变曲线的曲率。在右上方再画一条一样的曲线,以形成一条路。DEMO效果如下:
与quadraticCureTo函数一样的曲线功能还涉及:bezierCurveTo、arcTo和arc函数。这些函数通过多种控制点(如
半径、角度和等)让曲线更具可塑性。
本文参考自:
PRo HTML5 Progr
amming.
作者 Terry_龙
上篇通过对canvas 画对角线,了解了一些canvas画图基本原理。现在可以利用
HTML5 canvas API创建一个场景:带有长跑跑道的树林。
本篇大纲
用canvas API绘制树木的树冠
为树冠的边框架加粗并且填充树冠颜色
为树冠创造一个强大的树干
绘制跑道
用canvas API绘制树木的树冠
原理还是与上篇画对角线一样,只是步骤增多而已,先看代码:
<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(){
var canvas=document.getElementById('diagonal');
var context=canvas.getContext('2d');
context.save();
context.translate(130,250);
createCanopyPath(context);
context.stroke();
context.restore();
}
window.addEventListener("load",drawTrails,true);
</script>
DEMO效果如下:
上面的代码中有一个特殊的函数叫做closePath。这个函数的行为同lineTo很像,唯一的差别在于closePath会将路径的起始坐标自动作为目标坐标。closePath还会通知canvas当前绘制的图形己经闭合或者形成了完全封闭的区域。
为树冠的边框架加粗并且填充树冠颜色
为了使树冠更加形象并且看起来像真的树,不得不利用canvas 的API绘制其图形外观,代码如下:
function drawTrails(){
var canvas=document.getElementById('diagonal');
var context=canvas.getContext('2d');
context.save();
context.translate(130,250);
createCanopyPath(context);
//加宽线条
context.lineWidth=4;
//平滑路径的接合点
context.lineJoin='round';
//将颜色改成棕色
context.strokeStyle='#663300';
//将填充色设置为绿色并填充树冠
context.fillStyle='#339900';
context.fill();
context.stroke();
context.restore();
}
DEMO效果见下面运行效果:
lineJoin属性设置为round,这是修改当前形状中线段的连接方式,让拐角变得更加油;也可以把lineJoin属性设置成bevel或者miter来变换拐角样式。
strokeStyle属性是为了改变线条颜色。
fillStyle属性是为了设置填充颜色
context 的fill 函数是为了可以让canvas对当前图形中所有的闭合路径内部的像素点进行填充,配合fillStyle 填充内部像形点颜色。
为树冠创造一个强大的树干
创建树干有两种方法:
用我们上面学过的使用线条然后配合closePath画树干
HTML5 提供了一个强大的填充矩形的函数fillRect 可以画一块矩形x轴、y轴、需要画的宽度和高度即可
在这里我们使用fillRect 来构建树干。代码如下:
context.fillStyle='#663300';
context.fillRect(-5,-50,10,50);
效果DEMO如下:
www.2cto.com:作者图片失效
与fillRect相关的函数还有:strokeRect和clearRect。strokeRect的作用是基于给出的位置和坐标画出矩形的轮廓,clearRect的作用是清除矩形区域内的所有内容并将它恢复到初始状态,即透明。
绘制跑道
完成本篇最后一个功能,在小树旁边画上一个跑道。代码如下:
function drawTrails(){
var canvas=document.getElementById('diagonal');
var context=canvas.getContext('2d');
context.save();
context.translate(130,250);
createCanopyPath(context);
//加宽线条
context.lineWidth=4;
//平滑路径的接合点
context.lineJoin='round';
//将颜色改成棕色
context.strokeStyle='#663300';
//将填充色设置为绿色并填充树冠
context.fillStyle='#339900';
context.fill();
context.fillStyle='#663300';
context.fillRect(-5,-50,10,50);
context.stroke();
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);
context.strokeStyle='#663300';
context.lineWidth=20;
context.stroke();
context.restore();
}
quadraticCurveTo函数绘制曲线的起点是当前坐标,带有两组(x,y)参数。第二组是指曲线的终点。第一组代表控制点。所谓的控制点位于曲线的旁边,其作用相当于对曲线产生一个拉力。通过高速控制点的位置,就可以改变曲线的曲率。在右上方再画一条一样的曲线,以形成一条路。DEMO效果如下:
与quadraticCureTo函数一样的曲线功能还涉及:bezierCurveTo、arcTo和arc函数。这些函数通过多种控制点(如半径、角度和等)让曲线更具可塑性。
本文参考自:pro HTML5 Programming.
作者 Terry_龙
觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! html5教程,巧夺天工,精雕玉琢。小宝典献丑了!
脚本宝典总结
以上是脚本宝典为你收集整理的html5教程-HTML5 学习手笔二:canvas API 绘制树形图案A全部内容,希望文章能够帮你解决html5教程-HTML5 学习手笔二:canvas API 绘制树形图案A所遇到的问题。
如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。