在Canvas上做图
1、绘制树冠轮廓
<!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 drawTrails () {
var canvas=document.getElementById("trails");
var context=canvas.getContext("2d");
context.save();
context.translate(130,250);
//创建表现树冠的路径
createCanopyPath(context);
//绘制当前路径
context.stroke();
context.restore();
}
window.addEventListener("load",drawTrails,true);
</script>
<body>
<canvas id="trails" style="border:1px solid;" width="400" height="400">
</canvas>
</body>
</html>
效果是画出树的外冠
2、描边样式
增加代码
//创建表现树冠的路径
createCanopyPath(context);
//加宽线条
context.lineWidth=4;
//平滑路径
context.lineJoin='round';
//将颜色改成棕色
context.strokeStyle='#663300';
//绘制当前路径
context.stroke();
结果：
3、填充样式
增加填充代码
//将填充色设置为绿色并填充树冠
context.fillStyle='#339900';
context.fill();
//绘制当前路径
context.stroke();
结果：
4、填充矩形区域
增加填充矩形区域代码
//将填充色设置为绿色并填充树冠
context.fillStyle='#339900';
context.fill();
//将填充色设为棕色
context.fillStyle="#663300";
//填充用作树干的矩形区域
context.fillRect(-5,-50,10,50);
//绘制当前路径
context.stroke();
结果：
5、绘制曲线
添加曲线
//绘制当前路径
context.stroke();
context.restore();
//保存canvas的状态并绘制路径
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();
//恢复之前的canvas状态
context.restore();
}
结果：
2011-5-14 9:13 danny
所有代码清单：
<!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 drawTrails () {
var canvas=document.getElementById("trails");
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();
//保存canvas的状态并绘制路径
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();
//恢复之前的canvas状态
context.restore();
}
window.addEventListener("load",drawTrails,true);
</script>
<body>
<canvas id="trails" style="border:1px solid;" width="400" height="400">
</canvas>
</body>
</html>
分享到：
相关推荐
如果需要在canvas上进行动态交互，比如点击canvas时检测是否与div重叠，或者让div跟随鼠标移动，我们需要用到JavaScript。例如，可以监听canvas的`mousedown`和`mousemove`事件，然后通过计算鼠标位置与div的位置...
在使用html2canvas之前，先了解一下其基本属性和使用方法是十分必要的。html2canvas接受一个HTML元素作为参数，这个元素可以是整个页面，也可以是页面的一部分。通过调用html2canvas()函数，并传入对应的HTML元素，...
html2canvas的工作原理是通过读取DOM结构，将HTML元素转换成Canvas上的图形。由于Canvas是基于像素操作的画布，它可以精确地再现HTML元素的样式和布局。这个过程涉及到CSS样式解析、文字渲染、图片加载等多个复杂的...
在这个例子中，我们对整个body进行截图，并将生成的Canvas添加到页面上，同时也会创建一个指向截图的图片链接。如果你想要自定义截图区域，可以传入更具体的DOM选择器或者DOM元素。 另外，值得注意的是，...
在HTML2Canvas的实现中，它通过读取DOM树并将其转换为Canvas上的图形来工作。它不依赖于任何服务器端的技术，而是完全在客户端运行，这使得它在实时生成和交互式应用中非常高效。 HTML2Canvas提供以下主要特性： 1....
"鼠标在canvas上悬浮，并提示鼠标位置信息"这个主题涉及到了Canvas与事件处理、坐标系统以及用户交互的相关知识。 首先，我们需要理解HTML5 Canvas的基本结构。一个Canvas元素可以通过`<canvas>`标签在HTML文档中...
通过这些步骤，我们可以利用HTML2Canvas在网页上动态地为图片添加水印，从而满足版权保护或其他需求。然而，值得注意的是，HTML2Canvas并不是完美的解决方案，它可能无法完全还原所有CSS样式，因此在实际应用中需要...
综上所述，html2canvas在uniAPP中用于生成HTML内容的图片，无论是截取整个页面还是特定部分，都可以提供便捷的解决方案。开发者需要理解其工作原理，合理处理滚动页面和兼容性问题，才能在实际项目中发挥出它的价值...
的工作原理是基于浏览器的DOM渲染机制，它遍历网页的DOM树，并将每个元素及其样式信息转换为Canvas上的图形。由于Canvas API提供了丰富的绘图方法，html2canvas能够模拟网页的视觉效果，包括文字、图片、背景颜色、...
1. **DOM渲染**：html2canvas首先会遍历DOM树，将每个元素及其样式转化为Canvas上的图形。这包括了文字、图片、颜色、边框等元素的处理。 2. **CSS样式支持**：虽然html2canvas尽力模拟浏览器的CSS渲染，但并不是...
在本案例中，我们将深入探讨如何使用html2canvas来实现这样的功能。 首先，我们需要了解html2canvas的工作原理。它通过读取DOM结构，然后在浏览器的内存中构建一个对应的Canvas元素。这个过程中，html2canvas会处理...
`canvg`是一个专门用来在Canvas上渲染SVG的库，它能够解析SVG文档并将其绘制到Canvas元素上。当`html2canvas`遇到SVG元素时，通过先用`canvg`将SVG渲染到Canvas，然后再让`html2canvas`处理，可以有效地解决SVG截图...
然而，像所有软件一样，HTML2canvas也可能会遇到兼容性问题，尤其是在不同的操作系统和浏览器上。 标题中的"html2canvas-rc4.js和html2canvas.min.js"指的是HTML2canvas的两个不同版本。"rc4"通常代表Release ...
它提供了一组方法，如 `canvas2image.canvasToDataUrl()` 用于生成数据URL，`canvas2image.canvasToFile()` 用于生成File对象，方便上传等操作。例如： ```javascript var url = canvas2Image.canvasToDataUrl...
html2canvas的工作原理是解析DOM（文档对象模型）树，并将其渲染到一个虚拟的Canvas上，然后可以将这个Canvas导出为图片格式，如JPEG、PNG等。这个过程是完全在浏览器端完成的，无需服务器参与，因此数据安全性和...
在一些情况下，我们可能希望将这些虚拟DOM节点直接渲染到canvas上，例如在制作交互式图表或者游戏时，canvas提供了更直接的像素操作能力。 "vnode2canvas"插件实现了这个功能，它提供了一个方法来将Vue组件或VNode...
`canvas2image` 是一个轻量级的JavaScript库，它能够将Canvas对象转换为Image对象，从而可以使用`toDataURL`方法生成Base64编码的图片URL。这个URL可以直接设置为img标签的src，也可以用于下载或发送到服务器。基本...
这个html2canvas脚本将当页面渲染成一个Canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现。 它不需要来自服务器任何渲染，整张图片都是在客户端浏览器创建。当浏览器不支持Canvas时，将采用Flashcanvas...
1.该脚本允许您直接在用户浏览器上对网页或其部分进行“截图”。屏幕截图基于 DOM，因此可能不是 100% 准确到真实表示，因为它不会制作实际的屏幕截图，而是根据页面上可用的信息构建屏幕截图。 2.它只能正确渲染它...
2. **创建Canvas**：然后，它在内存中创建一个与网页相同尺寸的Canvas元素，并根据DOM信息在Canvas上绘制元素。 3. **样式处理**：html2canvas会尽可能地模拟浏览器的CSS渲染规则，包括盒模型、阴影、渐变、透明度等...