返回列表 发新帖

html5 canvas中绘制矩形实例

274.4k 12
swmozowtfl 发表于 2015-7-18 00:11:52|湖北 | 查看全部 阅读模式
本文翻译自steve fulton & jeff fulton html5 canvas, chapter 2, “the basic rectangle shape”.; f; _" Z7 z+ ]+ S# ~
让我们来看一下canvas内置的简单几何图形 — 矩形的绘制。在canvas中,绘制矩形有三种方法:填充(fillrect)、描边(strokerect)以及清除(clearrect)。当然,我们也可以使用“路径”来描绘包括矩形在内的所有图形。9 ?) n4 j. r* m+ U- A9 y6 R+ c3 s% N
以下是上述三种方法的api:
3 u9 m" i+ f$ U2 n: v% l1.fillrect(x,y,width,height)。绘制一个从(x,y)开始,宽度为width,高度为height的实心矩形。4 F' v, c# l; p5 @. c; k
2.strokerect(x,y,width,height)。绘制一个从(x,y)开始,宽度为width,高度为height的矩形框。该矩形框会根据当前设置的strokestyle、linewidth、linejoin和miterlimit属性的不同而渲染成不同的样式。
' h9 P- I, p/ G  o+ g  ]/ k3.clearrect(x,y,width,height)。清除从(x,y)开始,宽度为width,高度为height的矩形区域,使之完全透明。
5 t- M! A7 @- T: T) }, l: k在调用上述方法绘制canvas之前,我们需要设定填充和描边的样式。设定这些样式最基本的方法是使用24位色(用16进制字符串表示)。以下是一个简单的例子:
  h" k1 W2 R3 H6 S9 z% A
' I' _+ e, ]; t0 P/ t3 x代码如下:
, V1 |- E4 G" u  q7 Q+ y
context.fillstyle = #000000;1 [4 C; U1 w/ _' m, l4 V- ^
context.strokestyle = #ff00ff;
; z5 N' a* F7 n5 ]5 B# S# w在下面的例子中,填充色设定为黑色,而描边色则设定为紫色:
( M- w( ^" N0 Q2 ]( H代码如下:/ j( M$ U: i; g, P7 v
function drawscreen() {) w# h  A. {' q. y
context.fillstyle = #000000;
# j7 E1 B) ?/ [$ f: W. U& j1 Wcontext.strokestyle = #ff00ff;0 V" V  ]: {) A, F! |' O
context.linewidth = 2;
  T- V- r) \" ]7 Ccontext.fillrect(10, 10, 40, 40);
: s5 J/ [( _" Y; j3 ]context.strokerect(0, 0, 60, 60);
7 C5 @/ ~( c, |0 Fcontext.clearrect(20, 20, 20, 20);2 Q) D' h- g- c6 t/ \$ R. ^
}
3 q8 N6 [$ q' [& n' U0 }; D" U2 g  ?1 W; R
更多网页制作信息请查看: 网页制作

回复|共 12 个

GoodyFouppy 发表于 2015-11-3 19:05:27|INNA | 查看全部
我刚来~~~嘿嘿~~此声明最终解释权归本人所有。
gevaemaidovef 发表于 2015-11-3 19:05:41|墨西哥 | 查看全部
命不能争,运可以造,弱者认命,强者抗命,能者求命,智者造命。
alapScady 发表于 2015-11-3 19:06:30|美国 | 查看全部
感觉这个论坛的站长太牛B了,好强大啊
wwzcdenleclv 发表于 2015-11-3 19:06:40|韩国 | 查看全部
呵呵 大家好奇嘛 来观看下~~~~
seazvyt 发表于 2016-2-6 18:23:22|江苏 | 查看全部
要相信自己~智商为0
tohme 发表于 2016-2-6 18:23:31|哥斯达黎加 | 查看全部
看完楼主的帖子,我的心情竟是久久不能平静
GoodyFouppy 发表于 2016-2-6 18:23:36|巴西 | 查看全部
这个论坛值得推荐,给了我们这么好的一个平台
seazvyt 发表于 2016-2-6 18:23:56|奥地利 | 查看全部
唉!猪!你怎么了?
bqtklouu 发表于 2017-4-11 10:07:21|美国 | 查看全部
下次有人骂我了...我给他还回去..
effoggikeftor 发表于 2017-4-11 10:09:08|美国 | 查看全部
终于看完了~~~
Mqokjdvq 发表于 2017-4-11 10:09:27|美国 | 查看全部
卧虎藏龙里面半天云的人物个性。由此而言,作者是性格是完善的,想必经历过家庭的其 乐融融,也经历过种种人伦惨剧吧,把作者的创作潜质激发的淋漓尽致。
effoggikeftor 发表于 2017-4-11 10:12:05|上海 | 查看全部
哪个正常的人能崇拜一只蟑螂呢?

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

得知互动是一个融创意、设计、开发、营销、生活、互联网于一体的专业交流分享平台。
Copyright © 2026 站长技术交流论坛|互联网技术交流平台|Ai技术交流平台 版权所有 All Rights Reserved. Powered by Discuz! X5.0 鄂ICP备15006301号-5|鄂公网安备 42018502006730号
关灯 在本版发帖 扫一扫添加QQ客服 返回顶部
快速回复 返回顶部 返回列表