canvas 系列（一）

canvas 是用 js繪制圖形的html元素。起初是 Apple 引入webkit 供mac os 使用于 Dashboard的，后來各大瀏覽器都實現了。

基礎

  • 使用canvas需要要獲得要繪制圖形的上下文
  • 默認大小 300 x 150

接下來我們用canvas畫個矩形

  • 首先定義canvas標簽
  <canvas id="canvas" width></canvas>
  • 然而什么也沒發生，加個邊框，看到一個寬300 高150的方框了吧
canvas{
  border: 1px solid black;
}
  • 上面當然不是我們要畫的矩形，下面才是
let canvas = document.getElementById("canvas") // 獲取頁面canvas對象
let ctx = canvas.getContext("2d") // 獲取繪制圖形的上下文，參數可以是2d、3d...

ctx.fillStyle = "rgb(0, 0, 0)" // 下面繪制圖形的填充色
ctx.fillRect(10, 10 , 100, 100) // 從坐標（10，10）的地方畫個寬100高100矩形
  • 這就是你畫的矩形，還挺像
image.png
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。