簡(jiǎn)單初步:
1.創(chuàng)建CANVAS畫(huà)布
2.引入繪畫(huà)腳本
3.使用draw函數(shù)進(jìn)行繪畫(huà)
<h3>創(chuàng)建畫(huà)布</h3>
canvas畫(huà)布創(chuàng)建
<h3>繪制矩形</h3>
1.獲取canvas元素
2.取得上下文
3.填充與繪制邊框
4.設(shè)置繪制樣式
5.指定畫(huà)筆寬度
6.設(shè)置顏色值
7.繪制矩形
canvas繪制方法
canvas繪制樣式
設(shè)置畫(huà)筆寬度
設(shè)置顏色值
繪制矩形
<h2>繪制圖形</h2>
canvas元素本身是沒(méi)有繪圖能力的见秽,必須要在JavaScript下完成
參考文檔:https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D
繪制矩形
繪制矩形
<h2>繪制圖片</h2>
繪制圖形
<h2>HTML5使用路徑</h2>
canvas路徑
繪制圓形
filltext
text
text
水平對(duì)其方式
保存圖片
保存為圖片
setInterval
<h3>制作簡(jiǎn)單動(dòng)畫(huà)</h3>
1.使用setInterval設(shè)置動(dòng)畫(huà)的間隔時(shí)間
1.setInterval(code,millisec)
第一個(gè)函數(shù)表示執(zhí)行動(dòng)畫(huà)的函數(shù)愉烙,第二個(gè)參數(shù)表示時(shí)間間隔
2.使用擦除圖形繪圖clearRect方法:
context.fillRect(x,y,width,height);
x為地點(diǎn)橫坐標(biāo),y為起點(diǎn)縱坐標(biāo)解取,width為擦子的長(zhǎng)度步责,height為擦子高度