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
分享到：
相关推荐
如果需要在canvas上进行动态交互，比如点击canvas时检测是否与div重叠，或者让div跟随鼠标移动，我们需要用到JavaScript。例如，可以监听canvas的`mousedown`和`mousemove`事件，然后通过计算鼠标位置与div的位置...
"鼠标在canvas上悬浮，并提示鼠标位置信息"这个主题涉及到了Canvas与事件处理、坐标系统以及用户交互的相关知识。 首先，我们需要理解HTML5 Canvas的基本结构。一个Canvas元素可以通过`<canvas>`标签在HTML文档中...
3. 使用D3.js的绘图功能：尽管D3.js自身专注于SVG，但你可以利用D3.js中提供的各种数据转换和映射功能来生成数据点，并使用Canvas的绘图上下文(context)将这些数据点绘制到Canvas上。例如，使用D3的缩放和比例尺...
html2canvas的工作原理是通过读取DOM结构，将HTML元素转换成Canvas上的图形。由于Canvas是基于像素操作的画布，它可以精确地再现HTML元素的样式和布局。这个过程涉及到CSS样式解析、文字渲染、图片加载等多个复杂的...
在HTML2Canvas的实现中，它通过读取DOM树并将其转换为Canvas上的图形来工作。它不依赖于任何服务器端的技术，而是完全在客户端运行，这使得它在实时生成和交互式应用中非常高效。 HTML2Canvas提供以下主要特性： 1....
在使用html2canvas之前，先了解一下其基本属性和使用方法是十分必要的。html2canvas接受一个HTML元素作为参数，这个元素可以是整个页面，也可以是页面的一部分。通过调用html2canvas()函数，并传入对应的HTML元素，...
在Android开发中，Canvas是图形绘制的核心工具，它允许开发者在屏幕、图片或者Bitmap上进行绘制操作。要实现“在Canvas上显示动画”，我们需要深入理解Canvas的使用方式以及与动画相关的概念和技术。以下是对这个...
在一些情况下，我们可能希望将这些虚拟DOM节点直接渲染到canvas上，例如在制作交互式图表或者游戏时，canvas提供了更直接的像素操作能力。 "vnode2canvas"插件实现了这个功能，它提供了一个方法来将Vue组件或VNode...
WebGL广泛支持于现代桌面浏览器和移动浏览器中，例如Chrome、Firefox、Safari、Opera以及Internet Explorer和Edge浏览器等，为用户提供了在网页上进行高性能3D图形处理的能力。 WebGL的应用场景十分广泛，许多基于...
在这个例子中，我们对整个body进行截图，并将生成的Canvas添加到页面上，同时也会创建一个指向截图的图片链接。如果你想要自定义截图区域，可以传入更具体的DOM选择器或者DOM元素。 另外，值得注意的是，...
这个“Delphi Canvas方法在图片上写入文字.rar”压缩包可能包含了如何利用Canvas对象在图片上添加文本的示例代码或教程。在Delphi中，Canvas是一个接口，它提供了在各种图形设备上进行绘图的方法，如在TBitmap、...
在Android开发中，Canvas是用于在屏幕上绘制图形和文本的核心组件。Paint对象则是用来设置绘制样式，如颜色、字体、线宽等。本教程将详细讲解如何利用Paint和Canvas在Android应用中实现在竖直方向上写字。 1. **...
2. **获取Canvas上下文**：在JavaScript中，我们需要获取到canvas元素的2D渲染上下文，这通常是通过`getContext('2d')`方法完成的。 ```javascript const canvas = document.getElementById('heartCanvas'); const ...
通过这些步骤，我们可以利用HTML2Canvas在网页上动态地为图片添加水印，从而满足版权保护或其他需求。然而，值得注意的是，HTML2Canvas并不是完美的解决方案，它可能无法完全还原所有CSS样式，因此在实际应用中需要...
`canvas2image` 是一个轻量级的JavaScript库，它能够将Canvas对象转换为Image对象，从而可以使用`toDataURL`方法生成Base64编码的图片URL。这个URL可以直接设置为img标签的src，也可以用于下载或发送到服务器。基本...
综上所述，html2canvas在uniAPP中用于生成HTML内容的图片，无论是截取整个页面还是特定部分，都可以提供便捷的解决方案。开发者需要理解其工作原理，合理处理滚动页面和兼容性问题，才能在实际项目中发挥出它的价值...
Allegro17.2 3D Canvas的设置和使用，3D效果显示，打开密码Qqun397903703
canvas2image是另一个JavaScript库，它主要用于将Canvas元素转换为Image对象，从而可以进行下载或者在页面上显示。Canvas元素本身不能直接保存为图片，而canvas2image库提供了便捷的方法来实现这一转换。 使用...
2. 使用Canvas绘制平行四边形：在Canvas上，我们同样可以利用路径来绘制平行四边形。定义起点，然后通过`lineTo()`添加其他顶点，最后调用`fill()`。 ```javascript ctx.beginPath(); ctx.moveTo(x1, y1); ctx.line...
的工作原理是基于浏览器的DOM渲染机制，它遍历网页的DOM树，并将每个元素及其样式信息转换为Canvas上的图形。由于Canvas API提供了丰富的绘图方法，html2canvas能够模拟网页的视觉效果，包括文字、图片、背景颜色、...