1.什么是Canvas?
- canvas 是 HTML5 提供的一個用于展示繪圖效果的標(biāo)簽
- HTML5 的 canvas 元素使用 JavaScript 在網(wǎng)頁上繪制圖像。
- 畫布是一個矩形區(qū)域茬故,可以控制其每一像素。
- canvas 擁有多種繪制路徑校焦、矩形俏脊、圓形、字符以及添加圖像的方法吊履。
2.創(chuàng)建Canvas標(biāo)簽
<canvas id="myCanvas" width="600" height="400"></canvas>
- 此標(biāo)簽只能展示繪圖內(nèi)容安皱,不能進(jìn)行繪圖。
- canvas的兼容性艇炎, IE9及其以上版本的瀏覽器酌伊,才支持canvas標(biāo)簽 。
3.通過JavaScript來繪制
- canvas 元素本身是沒有繪圖能力的缀踪。所有的繪制工作必須在 JavaScript 內(nèi)部完成
3.1 畫一個簡單的紅色矩形
<script type="text/javascript">
var c=document.getElementById("myCanvas"); //使用id來尋找canvas元素
var cxt=c.getContext("2d"); //創(chuàng)建Context對象
/*下面兩行繪制紅色矩形*/
cxt.fillStyle="#FF0000";
cxt.fillRect=(0,0,150,75);
</script>
- getContext() 方法可返回一個對象居砖,該對象提供了用于在畫布上繪圖的方法和屬性。
- fillStyle() 設(shè)置或返回用于填充繪畫的顏色驴娃、漸變或模式悯蝉,將其染成紅色。
- fillRect() 方法繪制“被填充”的矩形托慨,規(guī)定了形狀鼻由、位置和尺寸。
4.一些Canvas的方法和屬性
5.瀏覽器支持
Internet Explorer 9厚棵、Firefox蕉世、Opera、Chrome 以及 Safari 支持 <canvas> 及其屬性和方法婆硬。
Internet Explorer 8 以及更早的版本不支持 <canvas> 元素狠轻。
簡單的總結(jié):
在朋友的推薦下今天是第一次在這里寫這種文章,這大概只能算是一篇小小的學(xué)習(xí)記錄彬犯,并沒有什么技術(shù)含量向楼,我的文筆很差,寫不出來很華麗的東西谐区,但是偶爾寫寫湖蜕,大概也對自己知識積累寫作提升有很大幫助吧。
通過對canvas的學(xué)習(xí)宋列,知道了它好像是個不得了的東西昭抒,今天只是初步的了解了它的一些基礎(chǔ)知識,不懂的東西還很多,接下來也會繼續(xù)學(xué)習(xí)提升自己灭返。