canvas

<canvas id="canvas"></canvas>

js

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.fillStyle = 'green'; //顏色必須在畫出來之前
ctx.fillRect(10, 10, 100, 100);

不建議用css控制canvas寬高,會等比縮放。852

CanvasRenderingContext2D.fillRect()
填充一個矩形
參數分別為x,y,width,height。

CanvasRenderingContext2D.strokeRect()
畫出一個矩形邊框。
參數分別為x,y,width,height。

CanvasRenderingContext2D.clearRect()
是 Canvas 2D API 設置指定矩形區域內(以 點 (x, y) 為起點,范圍是(width, height) )所有像素變成透明,并擦除之前繪制的所有內容的方法。
clearRect(x, y, width, height)

CanvasRenderingContext2D.beginPath()
是 Canvas 2D API 通過清空子路徑列表開始一個新路徑的方法。 當你想創建一個新的路徑時,調用此方法。

CanvasRenderingContext2D.moveTo()
是 Canvas 2D API 將一個新的子路徑的起始點移動到(x,y)坐標的方法。
ctx.moveTo(x, y)

CanvasRenderingContext2D.lineTo()
是 Canvas 2D API 使用直線連接子路徑的終點到x,y坐標的方法(并不會真正地繪制)。
ctx.lineTo(x, y);

CanvasRenderingContext2D.stroke()
是 Canvas 2D API 使用非零環繞規則,根據當前的畫線樣式,繪制當前或已經存在的路徑的方法。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(200, 50);
ctx.stroke();

beginPath()開始 ,moveTo()移動畫筆,lineTo()決定要從畫筆現在位置連接到的坐標并移動到該坐標,
stroke()畫出這條線。

image.png

CanvasRenderingContext2D.fill()
是 Canvas 2D API 根據當前的填充樣式,填充當前或已存在的路徑的方法。采取非零環繞或者奇偶環繞規則。

CanvasRenderingContext2D.fillStyle
ctx.fillStyle = color;
ctx.fillStyle = gradient;//填充漸變的對象CanvasRenderingContext2D.createLinearGradient(), CanvasRenderingContext2D.createRadialGradient()

ctx.fillStyle = pattern;//重復的對象

填充出一個三角形

ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(50,10);
ctx.lineTo(30,30);
ctx.fillStyle='red';
ctx.fill();
image.png

注意:當你調用fill()函數時,所有沒有閉合的形狀都會自動閉合,所以你不需要調用closePath()函數。但是調用stroke()時不會自動閉合。

CanvasRenderingContext2D.arc()
是 Canvas 2D API 繪制圓弧路徑的方法。 圓弧路徑的圓心在 (x, y) 位置,半徑為 r ,根據anticlockwise (默認為順時針)指定的方向從 startAngle 開始繪制,到 endAngle 結束。
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)
x 圓弧中心(圓心)的 x 軸坐標。
y 圓弧中心(圓心)的 y 軸坐標。
radius 圓弧的半徑。
startAngle 圓弧的起始點, x軸方向開始計算,單位以弧度表示。
endAngle 圓弧的終點, 單位以弧度表示。
anticlockwise 可選的Boolean值 ,如果為 true,逆時針繪制圓弧,反之,順時針繪制。

lineWidth = 寬度

移動端
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

手機不適合用mouse事件
改用touch事件
ontouchstart
ontouchmove
ontouchend

touch與mouse有些區別
touchEvent.touches[n]
touch事件可能有多個點同時被按

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 一:canvas簡介 1.1什么是canvas? ①:canvas是HTML5提供的一種新標簽 ②:HTML5 ...
    GreenHand1閱讀 4,707評論 2 32
  • 一、canvas簡介 1.1 什么是canvas?(了解) 是HTML5提供的一種新標簽 Canvas是一個矩形區...
    Looog閱讀 3,951評論 3 40
  • 一、canvas簡介 1.1 什么是canvas?(了解) 是HTML5提供的一種新標簽 Canvas是一個矩形區...
    J_L_L閱讀 1,544評論 0 4
  • 一個階段做一個階段的事情 不要羨慕你這個階段之外其他階段的人 因為也許他們現在也在羨慕著你 而你羨慕的那個階段不是...
    不良嗜好閱讀 167評論 0 2
  • 記得那是06年,初中畢業的我,懷著滿腔熱血走入了那個期盼已久又有著一絲絲害怕的社會。 遇見她可能是意外,也許是...
    落葉似離別閱讀 481評論 0 0