canvas

<canvas id="drawing" width="200" height="200">xxx</canvas> <script>var drawing = document.getElementById('drawing')//傳入 2d 就可以獲得 2D 上下文drawing.getContent('2d')//保存圖片，添加到頁面中var imgURL = drawing.toDataURL('image/png')var img = document.createElement('img')img.src = imgURLdocument.body.appendChild(img)//矩形填充context.fillStyle = '#0000ff'context.fillRect(10,10,50,50)//矩形描邊context.strokeStyle = 'red';context.strokeRect(10,60,50,50)//清除矩形context.clearRect(20,20,10,10)//保存和調用上下文ctx.fillStyle='#ff0000'ctx.save()ctx.fillStyle='#00ff00'ctx.translate(100,100)ctx.save()ctx.fillStyle='#000000'ctx.translate(200,200)ctx.save()ctx.fillStyle='#0000ff'ctx.fillRect(0,0,100,200)ctx.restore()ctx.fillRect(10,10,100,200)ctx.restore()ctx.fillRect(0,0,100,200)ctx.restore()ctx.fillRect(20,20,100,200)</script>

canvas必須先設置width和height

getContext("2d")傳入 2d 就可以獲得 2D 上下文

toDataURL('image/png')可以把canvas畫的圖片保存下來，默認格式為png，也可設置為jpeg

fillRect(x,y,width,height)填充矩形，fillStyle填充顏色

strokeRect(x,y,width,height)描邊矩形，strokeStyle描邊顏色

lineWidth設置線條寬度

lineCap設置線條末尾的形狀，取值：butt平頭，round圓頭，square方頭

lineJoin設置線條相交方式，取值：round圓交，bevel斜交，miter斜接

clearRect(x,y,width.height)清除矩形

translate(x,y)變換原點坐標，將原點坐標移動到(x,y)

rotate()圍繞原點旋轉

save()保存上下，只保存上下文的設置和變換，不會保存上下文的內容

restore()調用上下文，調用從最近一個save()開始調用，逐級往上。

drawImage(繪制的圖像,源圖像x,源圖像y,源圖像width,源圖像height,目標圖像x,目標圖像y,目標圖像width,目標圖像height)

globalAlpha設置全局透明度

總結

以上是生活随笔為你收集整理的canvas 绘图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。