最近遇到了合成的一些坑，所以就想學習一下canvas雖然說這個是h5的新特性但是也沒有怎麼了解過，下面就是一些學習的經驗：
首先你需要建立canvan這個標籤，有了這個標籤你才可以對他進行操作，
這樣這個標籤就建立好了
let canvas=document.getelementbyid('canvas');
//這個獲取到canvas這個元素
let ctx=canvas.getcontext('2d');
//建立getcontext物件是內建的html5物件擁有多種繪製路徑，矩形，圓形，字元的方法。
ctx.fillstyle="rgb(200,0,0)";
//用於給建立的元素新增顏色
ctx.fillrect(x,y,w,h);
//用於對元素進行乙個位置和大小的控制
ctx.moveto(x,y)
//定義線條的開始座標
ctx.lineto(x,y)
//定義線條的結束座標
ctx.stroke()
//有了座標還需要乙個來繪製線條
ctx.arc(x,y,r,start,stop)
//用於繪製圓形後面也要使用stroke（）來繪製線條
canvas--字型
ctx.font='50px 微軟雅黑'
//定義字型的高度和樣式
ctx.filltext(text,x,y)
//在canvas上繪製實心的文字
ctx.stroketext(text,x,y)
//在canvas上繪製空心的文字
canvas--漸變
let grd=ctx.createlineargradient(x,y,x1,y1)
//建立線條漸變
let grd=ctx.createradiagradient(x,y,r,x1,y1,r1)
//建立乙個徑向圓漸變
grd.addcolorstop(0,red)
//方法指定顏色停止，引數使用座標來描述可以使0至1
ctx.fillstyle=grd
//使用漸變，設定fillstyle或strokestyle的值為 漸變，然後繪製形狀，如矩形，文字，或一條線。
ctx.fillrect(x,y,w,h)
//用於對元素進行乙個位置和大小的控制
canvas--影象
let img=document.getelementbyid('image')
//獲取元素
ctx.drawimage(image,x,y)
//將放置在canvas畫布上
canvas實現時針動畫案例
步驟解析 繪製時分秒針 繪製輪盤 實現時分秒針的轉動 主要利用時間的重新整理和requestanimationframe 的步伐跟著系統的重新整理步伐走。主函式 init function init 實現動畫的函式 function draw ctx 繪製時分秒的動畫 繪製時分秒針 function...
Canvas基本使用
canvas的意思是畫布，表現在螢幕上就是一塊區域，我們可以再上面使用各種api繪製我們想要的東西。可以說，canvas貫穿整個2d graphics，android.graphics中的所有類，幾乎都於canvas有直接或間接的聯絡。所以了解canvas是學習2d graphics的基礎。andr...
canvas效果案例 貝塞爾曲線
繪製二次貝塞爾曲線 ctx.quadraticcurveto x1,y1,x,y 從上一點開始繪製一條二次曲線，到 x,y 為止，並且以 x1,y1 作為控制點 ctx.beginpath ctx.strokestyle green ctx.linewidth 4 起始點 ctx.moveto 10...