html5 canvas 怎么绘制不规则矢量图
3 回答
婷婷同学_
TA贡献1844条经验 获得超8个赞
HTML5 <canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）。
不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。
getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
本手册提供完整的 getContext("2d") 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。
正如上面所说，你需要制作无数的规则图形组合到一起变成不规则图形。
操作可以说是相当复杂。建议你可以用HYPE3实验下，如果你想做HTML5动画的话。
POPMUISE
TA贡献1765条经验 获得超5个赞
canvas提供了直线，曲线，圆的画法，不规则图只有你自己把他们分别写然后用
moveTo(x,y) 从x,y开始绘制
lineTo(x,y)
连起来stroke（），就是一完整的图了
蝴蝶不菲
TA贡献1810条经验 获得超4个赞
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');
// Rectangles
canvas1.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>
- 3 回答
- 0 关注
- 2094 浏览
添加回答
举报
0/150
提交
取消