使用closePath()闭合图形
首先我们用最普通的方法绘制一个矩形。
JavaScript Code复制内容到剪贴板
- nbsp;html>
- "en">
-
-
"UTF-8">
-
-
-
- nbsp;html>
- "zh">
-
-
"UTF-8">
- 绘制矩形
-
-
"canvas-warp">
-
- 你的浏览器居然不支持Canvas？！赶快换一个吧！！
-
-
-
window.onload = function(){
-
var canvas = document.getElementById("canvas");
- canvas.width = 800;
- canvas.height = 600;
-
var context = canvas.getContext("2d");
-
- context.beginPath();
- context.moveTo(150,50);
- context.lineTo(650,50);
- context.lineTo(650,550);
- context.lineTo(150,550);
-
context.lineTo(150,50);
- context.lineWidth = 5;
-
context.strokeStyle = "black";
- context.stroke();
-
- }
-
-
-
-
-
运行结果：
乍一看没啥问题，但是视力好的童鞋已经发现了，最后一笔闭合的时候有问题，导致左上角有一个缺口。这种情况是设置了lineWidth导致的。如果默认1笔触的话，是没有问题的。但是笔触越大，线条越宽，这种缺口就越明显。那么这种情况该怎么避免呢？
标题已经剧透了，使用clothPath()闭合图形。
JavaScript Code复制内容到剪贴板
- nbsp;html>
- "zh">
-
-
"UTF-8">
- 绘制矩形
-
-
"canvas-warp">
-
- 你的浏览器居然不支持Canvas？！赶快换一个吧！！
-
-
-
window.onload = function(){
-
var canvas = document.getElementById("canvas");
- canvas.width = 800;
- canvas.height = 600;
-
var context = canvas.getContext("2d");
-
- context.beginPath();
- context.moveTo(150,50);
- context.lineTo(650,50);
- context.lineTo(650,550);
- context.lineTo(150,550);
-
context.lineTo(150,50);
-
context.closePath();
-
- context.lineWidth = 5;
-
context.strokeStyle = "black";
- context.stroke();
-
- }
-
-
-
Statement：The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
