Canvas基礎

hellowoody 發(fā)布于2019-08-22 10:50 / 682人閱讀

摘要：基礎使用元素必須為其設置寬度和高度屬性，指定可以繪制區(qū)域的大小。繪制路徑一切形狀的原始基礎都是路徑。其中規(guī)定要在圖像源中取得的切片位置和切片大小表示該切片在畫布中顯示的起始位置和大小。的狀態(tài)就是當前畫面應用的所有樣式和變形的一個快照。

title: Canvas基礎
date: 2016-11-09
tags: HTML5

0x00 Canvas

使用 Canvas 元素必須為其設置寬度和高度屬性，指定可以繪制區(qū)域的大小。如果不添加任何樣式或者不繪制任何圖形，那么是看不到該元素的。

但是若是通過 CSS 樣式來為其設置寬高屬性的話，如果 CSS 的尺寸與 canvas 初始比例(canvas 默認初始寬度 300 px 高度 150 px)不一致，它會出現(xiàn)扭曲。

創(chuàng)建 Canvas 元素，并通過 canvas.getContext() 方法獲取其 2D 上下文。

// HTML 


// JS
var drawing = $("#myCanvas")

if(drawing.getContext){
    // 確定瀏覽器是否支持

如上，如果需要在畫布上繪圖，那么首先便需要獲得繪圖上下文。

然后，使用 canvas.toDataURL() 方法便可以獲取在

if(drawing.getContext()){
    var imgURL = drawing.toDataURL("image/png");
    // 獲取圖像的數(shù)據(jù) URL

0x01 2D 上下文

使用 2D 上下文可以繪制簡單的 2D 圖形，比如矩形，弧線和路徑。其兩種基本繪圖操作是填充(fillStyle)和描邊(strokeStyle)

使用 strokeRect() 和 fillRect() 繪制矩形

可以使用 fillStyle() 屬性來為通過 fillRect() 繪制的矩形填充顏色；使用 strokeStyle() 屬性來為 strokeRect() 方繪制的矩形描邊

var drawing = $("#myCanvas")


if(drawing.getContext){
    // 檢測瀏覽器是支持 canvas
    
    var context1 = drawing.getContext("2d");    
    // 獲得 2d 上下文
    
    context1.fillStyle = "red"
    context1.fillRect(40,20,50,50)
    // 繪制一個矩形并填充 紅色

    context1.strokeStyle = "blue"    
    context1.strokeRect(10,10,50,50)
    // 繪制一個矩形并描邊為 藍色

}

此外，可以使用 clearRect() 方法來清除指定區(qū)域。

0x02 繪制路徑

一切形狀的原始基礎都是路徑。在 Cavans 創(chuàng)建一個形狀的首先需要的是創(chuàng)建新路徑(beginPath())，再通過繪圖命令(比如mouvTo()等)在路徑中繪制，然后關閉路徑(clostPath())，最后填充顏色(fill())或描邊(stroke())。

調用fill()函數(shù)時，所有沒有閉合的形狀都會自動閉合，所以你不需要調用closePath()函數(shù)。但是調用stroke()時不會自動閉合。

moveTo()

設置筆觸相對于畫布左上角開始的起點位置，即是路徑的起始點。

lineTo()

直線路徑。

描邊三角形

var drawing = $("#myCanvas")
if(drawing.getContext){
    // 檢測瀏覽器是支持 canvas
    var context = drawing.getContext("2d");    
    // 獲得 2d 上下文
    context.beginPath()
        context.strokeStyle = "green"
        context.moveTo(50,200)
        context.lineTo(200,100)
        context.lineTo(100,50)
        context.closePath()
        context.stroke()
    // 描邊三角形
}

描邊填充三角形

var drawing = document.querySelector("#drawing")
if(drawing.getContext){
    //是否支持 canvas
context = drawing.getContext("2d")
// 獲得 2d 上下文
context.beginPath()
// 開始繪畫
context.fillStyle = "#333"
// 填充色為 #333
context.strokeStyle = "deeppink"
// 描邊顏色為 deeppink
context.lineWidth = "20"
// 線框為 20 px
context.moveTo(150,150)
// 起始觸點 (150,150)
context.lineTo(150,300)
context.lineTo(300,225)
// 繪制一個三角形
context.closePath()
// 閉合路勁
context.stroke()
// 描邊
context.fill()
// 填充
}

arc() arcTo()

arc(x,y,radius,startAngle,endAngle,clockwise)

畫一個以（x,y）為圓心的以radius為半徑的圓弧（圓），從startAngle開始到endAngle結束，按照anticlockwise給定的方向（默認為順時針）來生成。

arc() 函數(shù)中的角度單位是弧度，不是度數(shù)。角度與弧度的js表達式:radians=(Math.PI/180)*degrees。

描邊圓形

for(var i=0;i<6;i++){
    for(var j=0;j<6;j++){
        context.strokeStyle ="rgb(0," + Math.floor(255-42.5*i) + "," + Math.floor(255-42.5*j) + ")"
        context.beginPath()
        context.arc(50+60*i,50+60*j,30,0,Math.PI/180*360)
        context.stroke()
    }
}

源自 MDN 官網(wǎng)。

描邊填充圓形

描邊填充圓形，并使用 globalAlpha 設置其透明度為 0.3

context.beginPath()
context.strokeStyle = "deeppink"        
context.fillStyle ="#333"
context.globalAlpha = "0.3"
context.lineWidth = "20"
context.arc(450,300,100,0,Math.PI/180*300)
context.closePath()
context.stroke()
context.fill()

0x03 漸變

Canvas 支持的漸變效果包括線性(createLinearGradient())和徑向(createRadialGradient())漸變,并使用addColorStop() 為其指定漸變顏色。

strokeStyle?和?fillStyle?屬性都可以接?canvasGradient?對象。

漸變顏色 addColorStop()

addColorStop(position,color) 中第一參數(shù) position 表示顏色出現(xiàn)在漸變中的相對位置。

線性漸變 createLinearGradient()

createLinearGradient(x1,y1,x2,y2)，其所接收的四個參數(shù)，分別代表漸變的起點和終點。

context.beginPath()
var lineGradient1 = context.createLinearGradient(100,200,100,400)
lineGradient1.addColorStop(0.5,"green")
lineGradient1.addColorStop(1,"red")
context.strokeStyle = lineGradient1
context.lineWidth = "20"
context.moveTo(100,200)
context.lineTo(100,400)
context.closePath()
context.stroke()

徑向漸變 createRadialGradient()

createRadialGradient(x1,y1,r1,x2,y2,r2) ?方法接受 6 個參數(shù)，前三個定義一個以 (x1,y1) 為原點，半徑為 r1 的圓，后三個參數(shù)則定義另一個以 (x2,y2) 為原點，半徑為 r2 的圓。

// 創(chuàng)建漸變
var radGrad = context.createRadialGradient(0,150,40,0,140,90)
radGrad.addColorStop(0,"#00C9FF")
radGrad.addColorStop(0.8,"#00B5E2")
radGrad.addColorStop(1,"rgba(0,201,255,0)")

// 畫圖形
context.fillStyle = radGrad
context.fillRect(0,0,150,150)

0x04 繪制文本 文本樣式

font:這個字符串使用和?CSS?屬性相同的語法. 默認的字體是?10px sans-serif

textAlign:文本對齊方式，可選值:start,end,left,right,center

textBaseline: 基線對齊方式，可選值:top,middle,bottom

fillText(text,x,y,[,maxWidth])

在指定的(x,y)位置填充指定的文本，繪制的最大寬度(可選).

strokeText(text,x,y,[,maxWidth])

在指定的(x,y)位置繪制空心文本，繪制的最大寬度(可選).

var linGrad = context.createLinearGradient(50,50,400,200)
linGrad.addColorStop(0.2,"red")
linGrad.addColorStop(0.7,"deeppink")
// 設置漸變
var str = "to be or not to be "
context.beginPath()
context.font = "60px 宋體"
// 設置文字格式 必需
context.textAlign = "left"
// 設置文字對齊方式 必需
context.textBaseline = "middle"
// 設置文字基線 必需
context.shadowColor = "#333" 
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur = 10;
context.closePath()
// 閉合路徑
context.fillStyle = linGrad
// 設置 fillStyle
context.strokeStyle = linGrad
// 設置 strokeStyle 
context.fillText(str,50,50,400)
// 填充文字
context.strokeText(str,50,100,400)
// 描邊文字
console.log(context.measureText(str))//width:570

measureText() 方法，將返回一個?[TextMetrics
]對象的寬度、所在像素，這些體現(xiàn)文本特性的屬性。

0x05 Using Images

canvas 強大的特性還以使我們對圖像進行操作處理。

當然，在對圖像進行操作之間必然要引入圖像資源，canvas 支持多種不同的圖像資源引入方式，這里只了解常用的兩種方式:使用 Image 對象或標簽和引用同一頁面中的另一畫布作為圖像資源.

drawImage(source,x,y)

圖像資源，以及在畫布中的起始位置

drawImage(source,x,y,width,height)

圖像資源，在畫布中的起始位置，并以指定的寬度和高度顯示在畫布中。以次實現(xiàn)圖像的縮放效果。

var isImage = new Image;
isImage.src = "Koala.jpg"
isImage.onload = function(){
  // do drawingImage statement
  context.drawImage(isImage,60,60,400,400)
  //五個參數(shù)時，代表圖片在畫布中顯示的起始點和圖片顯示的寬高
}

drawImage(source, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

當使用九個參數(shù)時，便是需要對圖像進行切片處理了。其中sx,sy,sWidth,sHeight 規(guī)定要在圖像源中取得的切片位置和切片大小；dx,dy,dWidht,dHeight 表示該切片在畫布中顯示的起始位置
和大小。

var isImage = new Image;
isImage.src = "Koala.jpg"
isImage.onload = function(){
    context.drawImage(isImage,300,300,400,300,100,100,200,200)
}

createPattern()

我們可使用 createPattern() 方法來規(guī)定圖像顯示的方式，none,repeat,repeat-x,repeat-y

var isImage = new Image;
isImage.src = "Koala.jpg"
isImage.onload = function(){
    //圖片是否平鋪
    var imgs = context.createPattern(isImage,"repeat-x")
    context.fillStyle = imgs
    context.fillRect(0,0,700,500)
}

0x06 畫布裁切 clip()

var isImage = new Image;
isImage.src = "Koala.jpg"
isImage.onload = function(){
    context.drawImage(isImage,0,0,400,400)
}
//畫布裁切 clip()
context.arc(230,230,170,0,Math.PI/180*360)
context.closePath()
context.clip()

0x07 畫布方法

save() 和 restore()

save 和 restore 方法是用來保存和恢復 canvas 狀態(tài)的，都沒有參數(shù)。Canvas 的狀態(tài)就是當前畫面應用的所有樣式和變形的一個快照。

context.beginPath()
context.fillRect(50,50,150,150)
// 使用默認設置繪制一個矩形
context.save()
// 保存默認配置下的繪畫狀態(tài)
context.fillStyle = "deeppink"
// 設置一個新的繪畫狀態(tài)
context.fillRect(65,65,120,120)
// 使用新的繪制狀態(tài)繪制一個矩形
context.restore()
// 恢復到默認繪制狀態(tài)
context.fillRect(80,80,90,90)
// 同樣，使用默認狀態(tài)繪制一個矩形

restore() 恢復的是離它最近的 save() 之上 所保存的狀態(tài)。

translate()

transltae(x,y) 方法用移動 canvas 原點。

context.fillRect(50,50,100,100)
context.translate(100,100)
context.fillRect(50,50,100,100)

scale(x，y)

scale(x,y) 縮放，其所接收的兩個參數(shù)分別代表在 x 的縮放因子和在 y 軸的縮放因子。

context.scale(1.5,1.5)
context.fillRect(50,50,100,100)
context.translate(150,150)
context.scale(0.5,0.5)
context.fillRect(50,50,100,100)

rotate()

rotate(angle) 只接受一個參數(shù)，即旋轉的角度，它是順時針方向的，與 arc() 同樣是以弧度為單位的值。

context.rotate(Math.PI/180*deg)

scale 也好，translate,rotate() 也好，所有的樣式和變形命令都應該寫在填充和描邊命令之前。

0x08 畫一個五角星

var r = 200
context.translate(200,200)
context.beginPath()
context.moveTo(r,0)
for(var i=0;i<9;i++){
    context.rotate(Math.PI/180*36)
    if(i%2 == 0){
        context.lineTo(r/(Math.cos(Math.PI/180*36)*2)*0.7,0)
    }else{
        context.lineTo(r,0)
    }
}
context.closePath()
context.fill()
}

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

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

Canvas基礎知識(一)

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

miya 2019-08-22 15:35 評論0 收藏0
【30分鐘學完】canvas動畫|游戲基礎(2)：從零開始畫畫

摘要：前言上篇主要是理論的概述，本篇會多些實踐，來講講的基礎用法，并包含一些基礎三角函數(shù)的應用，推薦沒有基礎的朋友閱讀，熟悉的朋友可以跳過。完整實例一個會跟蹤鼠標位置的箭頭三角函數(shù)上下運動終于順利過渡到三角函數(shù)的話題笑。前言上篇主要是理論的概述，本篇會多些實踐，來講講canvas的基礎用法，并包含一些基礎三角函數(shù)的應用，推薦沒有canvas基礎的朋友閱讀，熟悉的朋友可以跳過。本人能力...

anyway 2019-08-02 16:01 評論0 收藏0
【30分鐘學完】canvas動畫|游戲基礎(2)：從零開始畫畫

摘要：前言上篇主要是理論的概述，本篇會多些實踐，來講講的基礎用法，并包含一些基礎三角函數(shù)的應用，推薦沒有基礎的朋友閱讀，熟悉的朋友可以跳過。完整實例一個會跟蹤鼠標位置的箭頭三角函數(shù)上下運動終于順利過渡到三角函數(shù)的話題笑。前言上篇主要是理論的概述，本篇會多些實踐，來講講canvas的基礎用法，并包含一些基礎三角函數(shù)的應用，推薦沒有canvas基礎的朋友閱讀，熟悉的朋友可以跳過。本人能力...

Baoyuan 2019-08-22 15:42 評論0 收藏0

發(fā)表評論

登陸后可評論

0條評論

hellowoody

男|高級講師

我要關注我要私信

TA的文章

Hostinger：美國虛擬主機，首月9.9元起，美國vps，首月27元起

閱讀 3434·2021-11-08 13:20
TikTok 月活躍用戶達到 10 億

閱讀 3359·2021-09-30 09:48
SiteGround虛擬主機支持Brotli壓縮技術網(wǎng)站速度提高15-20％

閱讀 2559·2021-09-29 09:41
個人云主機有什么用-如果你有一臺云主機，你會用來做什么呢？

閱讀 589·2021-09-22 15:04
Vultr機房測評 - Vultr英國倫敦London機房綜合速度和線路去程回程測試

閱讀 2458·2021-08-23 09:44
UCloud推出U位智能資產管理服務，助力托管用戶進一步降本增效

閱讀 3663·2020-12-03 17:26
跨站腳本攻擊XSS

閱讀 1007·2019-08-30 14:10
應用現(xiàn)代CSS創(chuàng)建React App項目

閱讀 1561·2019-08-29 18:34

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Canvas基礎

moveTo()

lineTo()

描邊三角形

描邊填充三角形

描邊圓形

描邊填充圓形

漸變顏色 addColorStop()

線性漸變 createLinearGradient()

徑向漸變 createRadialGradient()

fillText(text,x,y,[,maxWidth])

strokeText(text,x,y,[,maxWidth])

drawImage(source,x,y)

drawImage(source,x,y,width,height)

drawImage(source, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

save() 和 restore()

translate()

scale(x，y)

rotate()

相關文章

Canvas基礎知識(一)

**【30分鐘學完】canvas動畫|游戲基礎(2)：從零開始畫畫**

**【30分鐘學完】canvas動畫|游戲基礎(2)：從零開始畫畫**

發(fā)表評論

0條評論

hellowoody

男|高級講師

TA的文章

Hostinger：美國虛擬主機，首月9.9元起，美國vps，首月27元起

TikTok 月活躍用戶達到 10 億

SiteGround虛擬主機支持Brotli壓縮技術網(wǎng)站速度提高15-20％

個人云主機有什么用-如果你有一臺云主機，你會用來做什么呢？

Vultr機房測評 - Vultr英國倫敦London機房綜合速度和線路去程回程測試

UCloud推出U位智能資產管理服務，助力托管用戶進一步降本增效

跨站腳本攻擊XSS

應用現(xiàn)代CSS創(chuàng)建React App項目

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Canvas基礎

moveTo()

lineTo()

描邊三角形

描邊填充三角形

描邊圓形

描邊填充圓形

漸變顏色 addColorStop()

線性漸變 createLinearGradient()

徑向漸變 createRadialGradient()

fillText(text,x,y,[,maxWidth])

strokeText(text,x,y,[,maxWidth])

drawImage(source,x,y)

drawImage(source,x,y,width,height)

drawImage(source, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

save() 和 restore()

translate()

scale(x，y)

rotate()

相關文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！