canvas基礎知識點（一）

ephererid 發布于2019-08-01 18:30 / 1029人閱讀

摘要：給設置寬高標簽的寬高默認是是一個行內塊元素可以在標簽上通過，來設置可以在中給對象設置注意不要通過來調整的寬高導致內部的畫布被拉伸，圖形變形獲取畫筆工具繪圖都是通過標簽的畫筆來進行的注意，不要寫成，里面傳入的參數目前也只有這一種情況描邊和填充

給canvas設置寬高：
canvas標簽的寬高默認是300*150,是一個行內塊元素
可以在canvas標簽上通過width，height來設置
可以在js中給dom對象設置：

  mycanvas.width = 500
  mycanvas.height = 500

注意：不要通過css來調整canvas的寬高,導致內部的canvas畫布被拉伸，圖形變形

獲取畫筆工具：
canvas繪圖都是通過canvas標簽的畫筆來進行的

var ctx = canvas.getContext("2d")

注意，不要寫成getContent，里面傳入的參數目前也只有2d這一種情況

3、描邊和填充

canvas繪制圖形都是繪制的路徑，看不見摸不著的一種東西，需要進行描邊或填充之后才能看到真正的圖形
如果繪制圖形的路徑在繪制完成后沒有閉合，繼續繪制路徑的時候會首尾相連
在填充的時候如果路徑依然沒有閉合，會將路徑的閉合區域填充

ctx.fill()//填充
ctx.stroke()//描邊

可以調整ctx.strokeStyle,ctx.fillStyle屬性來更改填充，描邊的顏色，值為顏色值（rgb,rgba,word,16進制）

繪制矩形
ctx.rect(x,y,w,h)
canvas的坐標系起點是左上角，x軸向右正方向，y軸向下正方向
x,y代表的是矩形起點（左上角）的位置，w,h就是寬高
可以使用strokeRect,fillRect方法直接繪制一個填充、描邊的矩形

清楚矩形區域以及動畫原理
ctx.clearRect(x,y,w,h)可以清除某一個矩形區域的圖形
canvas實現動畫的原理就是不斷的繪制和擦除來實現

   var ctx = canvas.getContext("2d")
   let x=0,y=0;
   ctx.fillRect(x,y,50,50)    
   setInterval(function () {
       //繪制新的圖形前擦掉之前的
       ctx.clearRect(0,0,canvas.width,canvas.height)
       x++;y++;
       //不斷繪制新圖形
       ctx.fillRect(x,y,50,50)
   },30)

云服務器 GPU云服務器基礎知識點小結 PHP基礎知識點基礎知識入門基礎知識

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/51775.html

Canvas基礎知識(一)

摘要：是新增的標簽，是個圖形容器。允許在其區域內進行繪制。其它大小由和決定。的創建標簽只有和兩個屬性，在沒有設置它們的情況下，默認大小為。只有一個參數，就是上下文的格式。下面的代碼用于檢測瀏覽器的是否支持支持不支持 canvas是Html5新增的標簽，是個圖形容器。允許JavaScript在其區域內進行繪制。其它大小由width和height決定。 canvas的創建 ;canvas標簽只有...

miya 2019-08-22 15:35 評論0 收藏0
canvas基礎知識

摘要：一基礎知識基礎知識代碼示例獲取元素獲取畫圖環境，指明為基礎知識線條線條寬度繪制出輪廓圓形填充路徑填充顏色描邊繪制文字繪制文字繪制描邊文字清除二高級功能保存和恢復繪圖狀態代碼示例保存狀態保存狀態恢復狀態你可以用棧的概覽去理解保存和恢復繪圖的狀一、canvas 基礎知識： 1、基礎知識代碼示例 var canvas = document.getElementById(canvas), ...

Dean 2019-08-20 17:17 評論0 收藏0
關于前端上傳文件全面基礎掃盲貼(六) ----- 圖片上傳,旋轉,重繪,預覽等實戰(附DEMO)

摘要：二編輯合成照片使用編輯壓縮重設尺寸比例轉成輸出預覽。三保存并上傳照片提交數據到服務器需要服務器支持我跳過了。數據主要來自拍攝的照片，多用于移動端開發，端也會用到，此插件兼容主流瀏覽器，以下不支持。系列文章關于前端上傳文件全面基礎掃盲貼(零)關于前端上傳文件全面基礎掃盲貼(一) ----- XMLHttpRequest關于前端上傳文件全面基礎掃盲貼(二) ----- File關于前端...

lmxdawn 2019-08-26 10:31 評論0 收藏0