資訊專欄INFORMATION COLUMN
摘要：前言是一個標簽，提供使用腳本繪制圖形圖像的最早由引入，現兼容的常規瀏覽器，目前可以使用個元素來繪制圖形。
前言
canvas是一個HTML5標簽，提供使用腳本繪制圖形圖像的api；最早由Apple引入WebKit，現兼容ie9+的常規瀏覽器，目前可以使用個
開始準備在常規的html頁面中插入html標簽容器
標簽屬性可以設置寬和高（默認300*150）
由于我們需要是用腳本繪制，要獲取元素，可以設置id（當然其他途徑獲取dom亦可）
至此我們可以看到瀏覽器渲染出一個100*100的盒子容器（沒有顏色，你可以使用瀏覽器看盒子模型）；
腳本獲取上下文 getContextcanvas提供api來自哪里， 獲取渲染canvas的上下文，就是獲取到一個對象，掛載含有提供api的對象，我們需要用這個對象提供api來繪制。
canvas兼容處理
不支持canvas的瀏覽器會把標簽忽略為自定義標簽，顯示里面的內容
有些兼容不好的api 需要根據按需求來判斷兼容并處理
// 不支持api 該給用設置戶友好提示了
if(!ctx.getContext) return;
填充 方形和 fillStyle、fillRect
ctx.fillStyle = "red";
ctx.fillRect(10,10,50,50);
解讀
上面我們獲取到了canvas上下文，拿到對象可以對對象操作，以上兩個屬性和方法就是小栗子；
fillStyle屬性值默認 #000 ,是一個string字符串，用于設置接下來繪制的顏色，可以設置為顏色的對象、rgb、rgba等；
fillRect方法接收四個參數，分別是x、y、width、height；x、y是繪制圖形的起點（左上角x，左上角y）
做點啥? 簡單的例子 笑果如下：源代碼地址：點擊查看
還可以慢慢做點別有趣的小動畫 如下：點擊查看代碼：點擊查看
拓展 繪制 矩形邊框 rect ctx.strokeStyle="blue";
ctx.rect(10,10,70,70);
ctx.stroke();
繪制 矩形區域 strokeRect
ctx.strokeStyle = "blue";
ctx.strokeRect(1,1,90,90);
清除 矩形區域
ctx.clearRect(40,40,10,10)
以上參數原理都一樣，從命名理解：
fill... 填充
stroke... 繪制
clear... 清除
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98083.html
摘要：前言是一個標簽，提供使用腳本繪制圖形圖像的最早由引入，現兼容的常規瀏覽器，目前可以使用個元素來繪制圖形。 前言 canvas是一個HTML5標簽，提供使用腳本繪制圖形圖像的api；最早由Apple引入WebKit，現兼容ie9+的常規瀏覽器，目前可以使用個元素來繪制2d圖形。 開始準備 在常規的html頁面中插入html標簽容器 標簽屬性可以設置寬和高（默認300*150） ...
摘要：前言上篇主要是理論的概述，本篇會多些實踐，來講講的基礎用法，并包含一些基礎三角函數的應用，推薦沒有基礎的朋友閱讀，熟悉的朋友可以跳過。完整實例一個會跟蹤鼠標位置的箭頭三角函數上下運動終于順利過渡到三角函數的話題笑。 前言 上篇主要是理論的概述，本篇會多些實踐，來講講canvas的基礎用法，并包含一些基礎三角函數的應用，推薦沒有canvas基礎的朋友閱讀，熟悉的朋友可以跳過。 本人能力...
摘要：前言上篇主要是理論的概述，本篇會多些實踐，來講講的基礎用法，并包含一些基礎三角函數的應用，推薦沒有基礎的朋友閱讀，熟悉的朋友可以跳過。完整實例一個會跟蹤鼠標位置的箭頭三角函數上下運動終于順利過渡到三角函數的話題笑。 前言 上篇主要是理論的概述，本篇會多些實踐，來講講canvas的基礎用法，并包含一些基礎三角函數的應用，推薦沒有canvas基礎的朋友閱讀，熟悉的朋友可以跳過。 本人能力...
閱讀 3393·2021-09-22 15:01
閱讀 524·2019-08-30 11:11
閱讀 950·2019-08-29 16:17
閱讀 1209·2019-08-29 12:23
閱讀 2023·2019-08-26 11:48
閱讀 3176·2019-08-26 11:48
閱讀 1415·2019-08-26 10:33
閱讀 1927·2019-08-26 10:30
