html5 canvas 怎么绘制不规则矢量图

3回答

婷婷同学_

HTML5 <canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）。不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。本手册提供完整的 getContext("2d") 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。正如上面所说，你需要制作无数的规则图形组合到一起变成不规则图形。操作可以说是相当复杂。建议你可以用HYPE3实验下，如果你想做HTML5动画的话。

0 0

POPMUISE

canvas提供了直线，曲线，圆的画法，不规则图只有你自己把他们分别写然后用moveTo(x,y) 从x,y开始绘制lineTo(x,y)连起来stroke（），就是一完整的图了

0 0

蝴蝶不菲

canvas画出来的图是位图做个测试：用canvas画一个简单的图像，然后把网页放大，你会看到canvas里面的图形和文字会失真（会看到一个一个的点变大）<html><head><title>Canvas Example</title><script type="text/javascript">function loader() {var canvas = document.getElementById('canvas');var canvas1 = canvas.getContext('2d');// Rectanglescanvas1.fillStyle = "rgba(0, 0, 200, 1)";canvas1.fillRect(30, 30, 75, 70);canvas1.font = 'italic 40px sans-serif';canvas1.strokeText("Hello!", 50, 50);}</script></head><body onload="loader()"><h1>Canvas Example</h1><canvas id="canvas" width="300" height="300"></canvas></body></html>

0 0