当前第2页 返回上一页
代码如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!DOCTYPE html>
< html >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" />
< title ></ title >
< meta charset = "utf-8" />
< style type = "text/css" >
</ style >
< script type = "text/javascript" >
function draw() {
var canvas = document.getElementById('SimpleCanvas');
if ( ! canvas || ! canvas.getContext ) {
return false;
}
var cx = 360;
var cy = 400;
var radius = 36;
var context = canvas.getContext('2d');
context.beginPath();
context.rect(240, 80, 160, 80);
context.lineWidth = 4;
context.strokeStyle = 'coral';
context.stroke();
}
</ script >
</ head >
< body onload = "draw()" style = "background-color:#D0D0D0;" >
< canvas id = "SimpleCanvas" width = "640" height = "480" class = "canvas" ></ canvas >
< div >Canvas Demo</ div >
</ body >
</ html >
|
说明:在绘制图像时,如果不调用fill()方法,只执行stroke()方法,就能绘制内部不填充的矩形。
运行结果
在浏览器上显示如下效果
最后我们来看直接填充内部的矩形绘制
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html>
< html >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" />
< title ></ title >
< meta charset = "utf-8" />
< script type = "text/javascript" >
function draw() {
var canvas = document.getElementById('SimpleCanvas');
if ( ! canvas || ! canvas.getContext ) {
return false;
}
var cx = 360;
var cy = 400;
var radius = 36;
var context = canvas.getContext('2d');
context.beginPath();
context.rect(260, 120, 220, 120);
context.fillStyle = 'burlywood';
context.fill();
}
</ script >
</ head >
< body onload = "draw()" style = "background-color:#D0D0D0;" >
< canvas id = "SimpleCanvas" width = "640" height = "480" style = "background-color:#FFFFFF;" ></ canvas >
< div >Canvas Demo</ div >
</ body >
</ html >
|
运行结果如下所示
以上就是如何使用HTML5 canvas绘制一个矩形的详细内容,更多文章请关注木庄网络博客!
返回前面的内容
相关阅读 >>
h5中的定位
如何使用HTML5 canvas绘制线条
分享用HTML5来实现一个3d逼真的圣诞树
h5微信支付之引入微信的js-sdk包失败的解决方法
如何从javascript到typescript?
利用HTML5自定义实现播放器代码分享
HTML5讲解之拖拽事件dragstart、drag和dragend
HTML5讲解之datatransfer对象
h5canvas实现刮刮乐效果代码
利用HTML5实现简单的拖动功能
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 如何使用HTML5 canvas绘制一个矩形