HTML <canvas> kawu
التعريف والاستخدام
<canvas> يتم رسم الشريط عادة من خلال سكربت (عادةً JavaScript) في الوقت الحقيقي.
<canvas> الشريط شفاف، إنه مجرد وعاء للرسومات، يجب استخدام سكربت لرسم الرسومات الفعلية.
zai jin shi JavaScript de suo yao liu bao he bu zhi chi <canvas> de suo yao liu bao zhong <canvas> yuan su nei bu de anyin
ti shi
qing zai wo men de HTML Canvas jiao cheng zhong xue hui guan yu <canvas> yu yuan de geng duo zhi shi.
ru xu kan guo suo you shu xing he fang fa de quan yuan can kao, qing zhi yue wo men de taɓaɓin kawu HTML canvas.
shi li
li shi 1
shi shi hui hua yi ge hong se ju xing, bing zai <canvas> yuan su zhi zhong xian xian ta:
<canvas id="myCanvas">
ni de suo yao liu bao bu zhi chi canvas biao qian.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>
li shi 2
ling ge <canvas> li shi
<canvas id="myCanvas">
ni de suo yao liu bao bu zhi chi canvas biao qian.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
// da kai ming tai du
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>
shi xing
| shi xing | zhi | mi shu |
|---|---|---|
| gao du | xi liu jia zhi | guan ding hua ban de gao du. ming yuan jia zhi wei 150. |
| kuandu | xi liu jia zhi | guan ding hua ban de kuandu. ming yuan jia zhi wei 300. |
quan ju shu xing
<canvas> biao qian hai zhi chi HTML zhong de quan ju shu xing.
shi jian shu xing
<canvas> biao qian hai zhi chi HTML zhong de shi jian shu xing.
ming yuan de CSS she zhi
da bai du browser jiang shi yong you xian de ming yuan ji zhi xian xian <canvas> yu xian
canvas {
height: 150px;
width: 300px;
}
<canvas> de li shi
wannan HTML elemen shine ke ta da zha she ji gei ke huan xiao yuan xian tu. Wannan zi ji you hao xing, dan que ba yi ge hu tu API zhan xian gei ke huan xiao JavaScript yi shi jiao ben neng hou ba xiang hui hua de shi tao hui hua dao yi kuai hua ban shang.
<canvas> biaozhi you Apple zai Safari 1.3 Web liulanqi zhong yinru. Dui HTML zhe yi genben kuozhan de yuanyu zaiyu, HTML zai Safari zhong de huihua nengli ye wei Mac OS X zhuomian de Dashboard zuanbian suo shi yong, biran Apple xiwang you yi zhong fangshi zai Dashboard zhong zhi chi jiaoben hua de tuxi.
Firefox 1.5 he Opera 9 dou genzongle Safari de lingyin. Zhe liang ge liulanqi dou zhi chi <canvas> biaozhi.
Women dama neng zai IE zhong shi yong <canvas> biaozhi, biran zai IE de VML zhichi de jishi shang yong kaifang de JavaScript maodai (you Google faqi) lai jianchi xingde hua ban. Canzhen:http://excanvas.sourceforge.net/.
<canvas> de zhuanxing de nuli you yi ge Web liulanqi changfangshi de bu jishi xiehui zai tuijin, yanjiu shang <canvas> yijing chengwei HTML 5 cao'an zhong yi ge zhengshi de biaoqian. Canzhen:http://www.whatwg.org/specs/web-apps/current-work/
<canvas> biaozhi he SVG yu VML zhi jian de butong
<canvas> biaozhi he SVG yu VML zhi jian de yi ge zhongyao de butong shi, <canvas> you yi ge jishi JavaScript de huihua API, er SVG he VML shi yong yi ge XML wendan lai miaoshuo huihua.
Zhe liang zhong fangshi zai gongneng shang shi dengdi de, renhe yi zhong dou neng yong renhe yi zhong lai moxing. Cong piaomian shang kan, ta men hen bu xiangtong, dou, meiyi zhong dou you qiangdian he ruodian. Daliu, SVG huihua hen rongyi bianji, zhiyao cong ta de miaoshuo zhong yichu yuanxi jing.
Yao cong tong yi tuxi de yi ge <canvas> biaozhi zhong yichu yuanxi, yonghou xiangchu huihua zai chongxian ta.
Zeren shi yong <canvas> biaozhi huihua
Dazhong Canvas huihua API dou bing wei dingyi zai <canvas> yuanxi shang, er shi dingyi zai tui guo hua ban de getContext() fangfaDuo de yige 'huizhao huanjing' duanxi.
Canvas API na'a kaiyada sunzhaofa. Dama, sunzhaofa da'an zhiyi lianxu de fangfa diaoyong lai dingyi, bu shi miaoshuo wei haozi he shuzi de zifuhua, biran yao xiang diaoyong beginPath() he arc() fangfa.
一旦定义了路径，其他的方法，如 fill()，都是对此路径操作。绘图环境的各种属性，比如 fillStyle，说明了这些操作如何使用。
注释：Canvas API 非常紧凑的一个原因上它没有对绘制文本提供任何支持。要把文本加入到一个
浏览器支持
表中的数字注明了首个完全支持该元素的浏览器版本。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
