html语言画矩形,利用HTML5 Canvas API绘制矩形的超级攻略

使用closePath()闭合图形首先我们用最普通的方法绘制一个矩形。

JavaScript Code复制内容到剪贴板

html>

html>

绘制矩形

你的浏览器居然不支持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复制内容到剪贴板

html>

绘制矩形

你的浏览器居然不支持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();        //使用closePath()闭合图形

context.lineWidth = 5;

context.strokeStyle = "black";

context.stroke();

}