html5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形

一、自定义画笔样式
/ `8 `5 V' z" [" O如果想为形状图上颜色，需要使用以下两个重要的属性。
9 B4 l0 A; S' ~0 W) b: Nfillstyle ： 设置下来所有fill操作的默认颜色。
strokestyle ： 设置下来所有stroke操作的默认颜色。
二、绘制具有颜色和透明度的矩形
代码如下:
4 N. T! ~* \8 ?0 Q* k3 d8 ]: Z! Y<!doctype html>
6 r3 U) @0 i) n9 V! p<html>
+ X: u  x, Y0 Z& w0 T- G3 ~& K<head>
<meta http-equiv=content-type content=text/html; charset = utf-8>
<title>html5</title>
7 g& k) v4 j7 S7 k* d# h$ U; X<script type=text/javascript charset = utf-8>
//这个函数将在页面完全加载后调用
, {; ]* ]$ W8 Hfunction pageloaded()
# L9 r: V% o! i3 y! T" T3 L# u{
//获取canvas对象的引用,注意tcanvas名字必须和下面body里面的id相同
var canvas = document.getelementbyid('tcanvas');
9 _: o4 Z4 E  A5 t//获取该canvas的2d绘图环境
7 B4 S2 o1 O2 i1 e8 [( M+ uvar context = canvas.getcontext('2d');
( _( q' {7 z* J. G//绘制代码将出现在这里
8 p6 c! o. _+ j//设置填充颜色为红色
context.fillstyle = red;
//画一个红色的实心矩形
context.fillrect(50,50,100,40);
6 Y: I% B! j/ v, ]  k3 v$ h4 ]//设置边线颜色为绿色
context.fillstyle = green;
//画一个绿色空心矩形
context.strokerect(120,100,100,35);
//使用rgb()设置填充颜色为蓝色
context.fillstyle = rgb(0,0,255);
//画一个蓝色的实心矩形
5 o! Z# [+ E3 v% x' ^6 N$ ^/ Ccontext.fillrect(80,230,100,40);
//设置填充色为黑色且alpha值(透明度)为0.2
context.fillstyle = rgba(0,0,0,0.2);
//画一个透明的黑色实心矩形
6 P) o  |: `' r% }" r/ \; w$ c% Zcontext.fillrect(300,180,100,50);
8 {, Z) y+ U& T" c( h- u: v}
</script>
</head>
<body onload=pageloaded();>
# O& j( ^. d1 {# C/ u, J) ^; ]<canvas width = 500 height = 300 id = tcanvas style = border:black 1px solid;>
; y- ]  U# Y; A4 w( i<!--如果浏览器不支持则显示如下字体-->
提示：你的浏览器不支持<canvas>标签
</canvas>
</body>
</html>
: Y6 _* O; _+ |. y) M8 s' ^
更多网页制作信息请查看： 网页制作

貌似我真的很笨????哎

哈 你逗逗他啊

呵呵 放心 如我算错 你以后来砸我的帖子 呵呵

疯了.........

其实今天baidu 又 抽风了

给我点愤怒.

哈哈 我支持你

如本人留言违反国家有关法律，请网络管理员及时删除本人跟贴。本回贴不暗示、鼓励、支持或映射读者作出生活方式、工作态度、婚姻交友、子女教育的积极或消极判断。