h5 canvas基本知识
canvas 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,后來又在Safari和Google Chrome被實現(xiàn)。 基于 Gecko 1.8的瀏覽器,比如 Firefox 1.5, 同樣支持這個元素。 canvas 元素是WhatWG Web applications 1.0規(guī)范的一部分,也包含于HTML 5中。
體驗Canvas
什么是Canvas？
HTML5 的 canvas 元素使用 JavaScript 在網(wǎng)頁上繪制圖像。 畫布是一個矩形區(qū)域，您可以控制其每一像素。 canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
創(chuàng)建Canvas元素
向 HTML5 頁面添加 canvas 元素。 規(guī)定元素的 id、寬度和高度：
? ?<canvas id="myCanvas" width="200" height="100"></canvas>
通過JavaScript來繪制
? ?/*獲取元素*/? ?var myCanvas = document.querySelector('#myCanvas');
? ?/*獲取繪圖工具*/
? ?var context = myCanvas.getContext('2d');
? ?/*設置繪圖的起始位置*/
? ?context.moveTo(100,100);
? ?/*繪制路徑*/
? ?context.lineTo(200,200);
? ?/*描邊*/
? ?context.stroke();
Canvas的基本使用
圖形繪制
需要理解些概念：
-
路徑的概念
-
路徑的繪制
-
描邊 stroke()
-
填充 fill()
-
-
閉合路徑
-
手動閉合
-
程序閉合 closePath()
-
-
填充規(guī)則(非零環(huán)繞) :（1）看這個區(qū)域是否填充（2）拉一條直線
（3）看和這條直線相交的軌跡。
（4）順時針+1 逆時針-1，默認值為0
（5）結果非0則填充，不為0則不填充。
-
開啟新的路徑 beginPath()
設置樣式
-
畫筆的狀態(tài)
-
lineWidth 線寬，默認1px
-
lineCap 線末端類型：(butt默認)、round、square
-
lineJoin 相交線的拐點 miter(默認)、round、bevel
-
strokeStyle 線的顏色
-
fillStyle 填充顏色
-
setLineDash() 設置虛線
-
getLineDash() 獲取虛線寬度集合: 參數(shù)為一個數(shù)組 :描述實 虛 線的寬度.
-
lineDashOffset 設置虛線偏移量（負值向右偏移）
-
參考文檔
-
w3school
-
Canvas_API
Canvas圖形繪制
矩形繪制
-
rect(x,y,w,h) 沒有獨立路徑
-
strokeRect(x,y,w,h) 有獨立路徑，不影響別的繪制
-
fillRect(x,y,w,h) 有獨立路徑，不影響別的繪制
-
clearRect(x,y,w,h) 擦除矩形區(qū)域
-
css設置一個漸變的背景：
background-image: linear-gradient(to right, red, yellow, skyblue, blue, green);
圓弧繪制
-
弧度概念
-
arc()
-
x 圓心橫坐標
-
y 圓心縱坐標
-
r 半徑
-
startAngle 開始角度
-
endAngle 結束角度
-
anticlockwise 是否逆時針方向繪制（默認false表示順時針；true表示逆時針）
-
繪制文本
-
ctx.font = '微軟雅黑' 設置字體
-
strokeText()
-
fillText(text,x,y,maxWidth)
-
text 要繪制的文本
-
x,y 文本繪制的坐標（文本左下角）
-
maxWidth 設置文本最大寬度，可選參數(shù)
-
-
ctx.textAlign文本水平對齊方式，相對繪制坐標來說的
-
left
-
center
-
right
-
start 默認
-
end
-
-
ctx.direction屬性css(rtl ltr) start和end于此相關
-
如果是ltr,start和left表現(xiàn)一致
-
如果是rtl,start和right表現(xiàn)一致
-
-
ctx.textBaseline 設置基線（垂直對齊方式 ）
-
top 文本的基線處于文本的正上方，并且有一段距離
-
middle 文本的基線處于文本的正中間
-
bottom 文本的基線處于文本的證下方，并且有一段距離
-
hanging 文本的基線處于文本的正上方，并且和文本粘合
-
alphabetic 默認值，基線處于文本的下方，并且穿過文字
-
ideographic 和bottom相似，但是不一樣
-
-
measureText() 獲取文本寬度obj.width
做動畫
繪制圖片
-
drawImage()
-
三個參數(shù)drawImage(img,x,y)
-
img 圖片對象、canvas對象、video對象
-
x,y 圖片繪制的左上角
-
-
五個參數(shù)drawImage(img,x,y,w,h)
-
img 圖片對象、canvas對象、video對象
-
x,y 圖片繪制的左上角
-
w,h 圖片繪制尺寸設置(圖片縮放，不是截取)
-
-
九個參數(shù)drawImage(img,x,y,w,h,x1,y1,w1,h1)
-
img 圖片對象、canvas對象、video對象
-
x,y,w,h 圖片中的一個矩形區(qū)域
-
x1,y1,w1,h1 畫布中的一個矩形區(qū)域
-
-
序列幀動畫
-
繪制精靈圖
-
動起來
-
控制邊界
-
鍵盤控制
坐標變換
-
平移 移動畫布的原點
-
translate(x,y) 參數(shù)表示移動目標點的坐標
-
-
縮放
-
scale(x,y) 參數(shù)表示寬高的縮放比例
-
-
旋轉
-
rotate(angle) 參數(shù)表示旋轉角度
-
?
?
?
?
?
轉載于:https://www.cnblogs.com/buautifulgirl/p/9749635.html
總結
以上是生活随笔為你收集整理的h5 canvas基本知识的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 行业报告
- 下一篇： 20172314 2018-2019-1