canvas setTransform()
畫布上的每個物件都擁有一個當前的變換矩陣。
此方法把當前的變換矩陣重置為單位矩陣,然後以相同的引數執行transform()。
也就是說允許縮放、旋轉、移動並傾斜當前的環境。
特別說明:該變換隻會影響setTransform()方法呼叫之後的繪圖。
語法結構:
[JavaScript] 純文字檢視 複製程式碼context.setTransform(a,b,c,d,e,f);
瀏覽器相容:
(1).IE9+瀏覽器支援此屬性。
(2).edge瀏覽器支援此屬性。
(3).谷歌瀏覽器支援此屬性。
(4).火狐瀏覽器支援此屬性。
(5).Opera瀏覽器支援此屬性。
(6).Safari瀏覽器支援此屬性。
引數值:
程式碼例項:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> canvas{ border:1px solid #d3d3d3; width:300px; height:150px; } </style> <script> window.onload=function(){ var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="yellow"; ctx.fillRect(0,0,250,100) ctx.setTransform(1,0.5,-0.5,1,30,10); ctx.fillStyle="red"; ctx.fillRect(0,0,250,100); ctx.setTransform(1,0.5,-0.5,1,30,10); ctx.fillStyle="blue"; ctx.fillRect(0,0,250,100); } </script> </head> <body> <canvas id="myCanvas">當前瀏覽器canvas標籤</canvas> </body> </html>
相關文章
- canvas setTransform()方法CanvasORM
- canvasCanvas
- canvas clearRect()Canvas
- canvas toBlob()Canvas
- canvas toDataURL()Canvas
- canvas stroke()Canvas
- canvas fill()Canvas
- canvas fillRect()Canvas
- canvas translate()Canvas
- canvas rotate()Canvas
- canvas scale()Canvas
- canvas fillText()Canvas
- canvas createPattern()Canvas
- canvas createImageData()Canvas
- canvas restore()CanvasREST
- canvas save()Canvas
- canvas putImageData()Canvas
- canvas drawImage()Canvas
- canvas clip()Canvas
- canvas arcTo()Canvas
- canvas isPointInPath()Canvas
- canvas arc()Canvas
- canvas getImageData()Canvas
- canvas fillStyleCanvas
- canvas closePath()Canvas
- canvas beginPath()Canvas
- canvas strokeRect()Canvas
- canvas strokeStyleCanvas
- canvas rect()Canvas
- canvas(三)Canvas
- 初探canvasCanvas
- Canvas 教程Canvas
- canvas transform()CanvasORM
- canvas apiCanvasAPI
- react canvasReactCanvas
- canvas translateCanvas
- One simple way to draw canvas, wxml2canvasCanvasXML
- WPF C# create canvas and draw ellipse in canvasC#Canvas