1、提取成函数
drawTree
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 canoyShadow =context.createLinearGradient(0,-50,0,0);
canoyShadow.addColorStop(0,'rgba(0,0,0,0.5)');
canoyShadow.addColorStop(0.2,'rgba(0,0,0,0)');
context.fillStyle=canoyShadow;
context.fillRect(-5,-50,10,50);
createCanopyPath(context);
context.lineWidth=4;
context.lineJoin='round';
context.strokeStyle='#663300';
context.stroke();
context.fillStyle="#339900";
context.fill();
}
添加放大的树全部代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>drawTree</title>
</head>
<script>
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 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 canoyShadow =context.createLinearGradient(0,-50,0,0);
canoyShadow.addColorStop(0,'rgba(0,0,0,0.5)');
canoyShadow.addColorStop(0.2,'rgba(0,0,0,0)');
context.fillStyle=canoyShadow;
context.fillRect(-5,-50,10,50);
createCanopyPath(context);
context.lineWidth=4;
context.lineJoin='round';
context.strokeStyle='#663300';
context.stroke();
context.fillStyle="#339900";
context.fill();
}
function drawTrails () {
var canvas=document.getElementById("trails");
var context=canvas.getContext("2d");
context.save();
context.translate(130,250);
drawTree(context);
context.restore();
//保存canvas的状态并绘制路径
context.save();
context.translate(260,500);
context.scale(2,2);
drawTree(context);
context.restore();
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();
//恢复之前的canvas状态
context.restore();
}
window.addEventListener("load",drawTrails,true);
</script>
<body>
<canvas id="trails" style="border:1px solid;" width="400" height="600">
</canvas>
</body>
</html>
结果：
2、加阴影
在DrawTree中加入画阴影的代码：
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 canoyShadow =context.createLinearGradient(0,-50,0,0);
canoyShadow.addColorStop(0,'rgba(0,0,0,0.5)');
canoyShadow.addColorStop(0.2,'rgba(0,0,0,0)');
context.fillStyle=canoyShadow;
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();
//X值随着Y值的增加面增加，借助拉伸变换，可创建一棵作阴影的树
context.transform(1,0,-0.5,1,0,0);
//在Y轴方向
context.scale(1,0.6);
context.fillStyle='rgba(0,0,0,0.2)';
context.fillRect(-5,-50,10,50);
createCanopyPath(context);
context.fill();
context.restore();
}
结果：
3、加入文本
加入如下代码
function drawTrails () {
var canvas=document.getElementById("trails");
var context=canvas.getContext("2d");
context.save();
context.font='60px impact';
context.fillStyle='#996600';
context.textAlign='center';
context.fillText('Happy Trails!',200,60,400);
context.restore();
context.save();
显示结果：
4、应用阴影，字体
添加如下代码：
function drawTrails () {
var canvas=document.getElementById("trails");
var context=canvas.getContext("2d");
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;
context.fillText('Happy Trails!',200,60,400);
context.restore();
结果：
全部代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>drawTree</title>
</head>
<script>
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 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 canoyShadow =context.createLinearGradient(0,-50,0,0);
canoyShadow.addColorStop(0,'rgba(0,0,0,0.5)');
canoyShadow.addColorStop(0.2,'rgba(0,0,0,0)');
context.fillStyle=canoyShadow;
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();
//X值随着Y值的增加面增加，借助拉伸变换，可创建一棵作阴影的树
context.transform(1,0,-0.5,1,0,0);
//在Y轴方向
context.scale(1,0.6);
context.fillStyle='rgba(0,0,0,0.2)';
context.fillRect(-5,-50,10,50);
createCanopyPath(context);
context.fill();
context.restore();
}
function drawTrails () {
var canvas=document.getElementById("trails");
var context=canvas.getContext("2d");
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;
context.fillText('Happy Trails!',200,60,400);
context.restore();
context.save();
context.translate(130,250);
drawTree(context);
context.restore();
//保存canvas的状态并绘制路径
context.save();
context.translate(260,500);
context.scale(2,2);
drawTree(context);
context.restore();
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();
}
window.addEventListener("load",drawTrails,true);
</script>
<body>
<canvas id="trails" style="border:1px solid;" width="400" height="600">
</canvas>
</body>
</html>
2011-5-14 11:26 danny
分享到：
相关推荐
div悬浮在canvas之上
canvas 3d效果的QT实现，演示了如何使用qt实现canvas3d效果
F3.js：Fake 3D，实现在 canvas(Context2d) 上绘制 3D 场景
鼠标在canvas上移动，显示鼠标位置
Allegro17.2 3D Canvas的设置和使用，3D效果显示，打开密码Qqun397903703
android利用Paint在Canvas上实现竖排写字
在canvas中使用d3.js。虽然d3.js声称支持了canvas，可是并没有提供实例代码，这个文档可以让你一目了然。
canvas例子，如何获取鼠标在canvas中的位置。html+js。下载双击即可在浏览器运行，F12可查看源代码。
# Canvas2image # a tool of saving or converting canvas to images ## Demo ## [canvas2image](http://hongru.github.com/proj/canvas2image/index.html) ## Code ## you can just use it like this Canvas2...
如果有特殊层级，需要单独设置，比如图片盖在背景上，图片的data-index为4。 2.data-multi设置是否一行显示false在一行显示 3.data-change-top设置字在view布局的高度，可根据手机平台设置 部分机型ios高度比android...
Canvas绘制3D烟花动画特效，js高质量源代码，网页必加点缀！ Canvas绘制3D烟花动画特效，js高质量源代码，网页必加点缀！ Canvas绘制3D烟花动画特效，js高质量源代码，网页必加点缀！ Canvas绘制3D烟花动画特效，js...
html2canvas改过后的插件
这个html2canvas脚本将当页面渲染成一个Canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现。 它不需要来自服务器任何渲染，整张图片都是在客户端浏览器创建。当浏览器不支持Canvas时，将采用Flashcanvas...
为大家介绍一款JS截图插件html2canvas.js，它可以通过纯JS对浏览器端经行截屏,下面就为大家介绍一下html2canvas.js属性和具体使用方法，并为大家提供了一个实例
vnode2canvas - 基于Vue插件将虚拟DOM渲染到canvas中
Web开发canvas2image.js将canvas保存为图片，下载图片。
我是在html2canvas官网http://html2canvas.hertzen.com/下载的js文件 在实际使用的时候发现其init方法只是将document转换为了canvas，并没有保存为图片这一步。 所以我在此基础上进行了扩展，可以调用我封装的方法...
2、新版canvas2d海报，官方文档比较乱，开发起来难度大。 3、canvas2d生成海报效率高，资源开资少，性能强。 4、普通canvas生成海报比canvas2d稍慢。 5、通过网上方法，进行大量的开发实现，最后封装成的组件。 6、...
H5 canvas制造3D旋转爱心表白
1.该脚本允许您直接在用户浏览器上对网页或其部分进行“截图”。屏幕截图基于 DOM，因此可能不是 100% 准确到真实表示，因为它不会制作实际的屏幕截图，而是根据页面上可用的信息构建屏幕截图。 2.它只能正确渲染它...