繪制圓形

function draw(id){

let canvas = document.getElementById(id)

if (canvas == null){

return false

}

let context = canvas.getContext("2d")

context.fillStyle = "#eeeeef"

context.fillRect(0,0,600,700)

//為什么是i<10?因為要畫10個圓

for(let i = 0;i<=10;i++){

//1.開始創(chuàng)建路徑

context.beginPath();

//2.圖形路徑

//(圓心x軸坐標，圓心y軸坐標，半徑，根據(jù)pi(3.1415926)來繪制，true)

context.arc(i*25,i*25,i*10,0,Math.PI*2,true);

//3.關閉路徑

context.closePath();

//(前三個為三原色，透明度)

context.fillStyle = "rgba(255,0,0,0.25)";

//4.調用繪制方法

context.fill()

}

}

moveTo與lineTo

function draw(id){

let canvas = document.getElementById(id)

let context = canvas.getContext("2d")

context.fillStyle = "#eeeeef"

context.fillRect(0,0,300,400)

let dx=150,dy=150,s=100

context.beginPath()

context.fillStyle = "rgb(100,255,100)"

//圖形邊框的樣式

context.strokeStyle = "rgb(0,0,100)"

let x = Math.sin(0),y = Math.cos(0)

let dig = Math.PI / 15*11

for (let i=0;i<30;i++){

let x = Math.sin(i*dig)

let y = Math.cos(i*dig)

//lineTo繪制直線

context.lineTo(dx+x*s,dy+y*s)

}

context.closePath()

context.stroke()

}

BezierCurveTo貝塞爾曲線

function draw(id){

let canvas = document.getElementById(id)

if (canvas==null){

return false;

}

let context = canvas.getContext("2d")

context.fillStyle = "rgb(238,233,233)"

context.fillRect(0,0,300,400)

let dx=130,dy=150,s=100

context.beginPath()

context.fillStyle = "rgb(255,228,225)"

let x = Math.sin(0),y = Math.cos(0)

let dig = Math.PI / 15*11

context.moveTo(dx,dy)

context.strokeStyle = "rgb(205,145,158)"

for (let i=0;i<30;i++){

let x = Math.sin(i*dig)

let y = Math.cos(i*dig)

//繪制貝塞爾曲線

context.bezierCurveTo(dx+x*s,dy+y*s-100,dy+x*s+100,dy+y*s,dx+x*s,dy+y*s)

}

context.closePath()

context.fill()

context.stroke()

}

繪制漸變圖形

function draw(id){

let canvas = document.getElementById(id)

let context = canvas.getContext("2d")

//g1是createLinearGradient對象

// 0,0是起點坐標；0,300是終點坐標

let g1 = context.createLinearGradient(0,0,0,300)

/**addColorStop()要設置兩次，分別對應起始和終點，

括號內的第一個參數(shù)，表示漸變開始和結束的位置，值在0-1之間；

第二個參數(shù)，設定三原色顏色值 **/

g1.addColorStop(0.1,"rgb(255,255,0)")

g1.addColorStop(1,"rgb(0,255,255)")

//將漸變色填充給g1

context.fillStyle = g1

//繪制圖形

context.fillRect(0,0,500,500)

//創(chuàng)建一個顏色和大小都在變化的

let g2 = context.createLinearGradient(0,0,300,0)

g2.addColorStop(0,"rgba(0,0,255,0.5)")

g2.addColorStop(1,"rgba(255,0,0,0.5)")

for (let i=0;i<10;i++){

//繪制路徑

context.beginPath()

//把漸變色填充給g2

context.fillStyle = g2

//arc()代表圓形

context.arc(i*25,i*25,i*10,0,Math.PI*2,true)

//關閉路徑

context.closePath()

//結束繪制

context.fill()

}

}

繪制漸變圖形,createLinearGradient(起始坐標點，結束坐標點)

addColorStop(offset,color)設定顏色，offset顏色距離起始點的偏移量

繪制徑向漸變圖形

function draw(id){

let canvas = document.getElementById(id)

//檢查是否有id參數(shù)

if (canvas == null){

return false

}

let context = canvas.getContext("2d")

//參數(shù)需要6個，起始位置和圓半徑，結束位置和圓半徑

context.fillStyle = "#eeeeef"

//繪制圖形

context.fillRect(0,0,500,500)

//進行平移

context.translate(200,50)

context.fillStyle ="rgba(255,0,0,0.25)"

for(let i = 0;i<50;i++){

context.translate(25,25)

context.scale(0.95,0.95)

//為什么這里PI要除以10 ，呈現(xiàn)什么效果？

context.rotate(Math.PI/10)

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

}

//關閉路徑

context.closePath()

//結束繪制

context.fill()

}

繪制徑向漸變圖形

function draw(id){

let canvas = document.getElementById(id)

//檢查是否有id參數(shù)

if (canvas == null){

return false

}

let context = canvas.getContext("2d")

//參數(shù)需要6個，起始位置和圓半徑，結束位置和圓半徑

let g1 = context.createRadialGradient(400,0,0,400,0,400)

g1.addColorStop(0.1,"rgb(255,255,0)")

g1.addColorStop(0.55,"rgb(255,0,255)")

g1.addColorStop(1,"rgb(0,255,255)")

//將漸變色填充給g1

context.fillStyle = g1

//繪制圖形

context.fillRect(0,0,500,500)

//關閉路徑

context.closePath()

//結束繪制

context.fill()

}

Title

function draw(id){

let canvas = document.getElementById(id)

//檢查是否有id參數(shù)

if (canvas == null){

return false

}

let context = canvas.getContext("2d")

let oprtns = new Array(

//圖形按照繪制順序重疊

"cource-atop",

"cource-in",

"cource-out",

"cource-over",

"destination-atop",

"destination-in",

"destination-out",

"destination-over",

//加色處理

"lighter",

"copy",

//重疊部分變透明

"xor"

);

i = 1

context.fillStyle = "blue"

//繪制圖形

context.fillRect(10,10,60,60)

//以數(shù)組Array里面第八個方式來重疊圖片

context.globalCompositeOperation = oprtns[i]

//再繪制一個圓形

context.beginPath()

context.fillStyle="red"

context.arc(60,60,30,Math.PI*2,false)

//關閉路徑

context.closePath()

//結束繪制

context.fill()

}

[HTML5 Canvas 給圖形繪制陰影]

Stars in the sky

Title

function draw(id){

//獲取Html中的canvas

let canvas = document.getElementById("canvas")

let context = canvas.getContext("2d")

//定義樣式

context.fillStyle = "rgb(0,104,139)"

//繪制一個矩形

context.fillRect(0,0,500,500)

//設置陰影與形狀的水平距離(x軸方向上)

context.shadowOffsetX = 7

context.shadowOffsetY =7

//設置陰影顏色

context.shadowColor ="rgba(205,133,0,0.5)"

//設置陰影模糊程度

context.shadowBlur = 12

//將畫布的x軸，y軸起始點(也就是整個坐標系)向瀏覽頁面y軸方向移動50

context.translate(-10,20)

for(let i= 0;i<3;i++){

context.translate(80,100)

//調用繪制五角星的函數(shù)

creatr5Star(context)

//填充當前圖像/路徑，默認黑色

context.fill()

}

}

//繪制五角星

function creatr5Star(context){

let n= 0,dx=100,dy= 0,s=50

context.beginPath()

//設置五角星的顏色

context.fillStyle = "rgb(255,165,0)"

let x = Math.sin(0)

let y = Math.cos(0)

let dig = Math.PI/5*4

//繪制五角星的五條邊

for (let i= 0;i<5;i++){

let x2 = Math.sin(i*dig)

let y2 = Math.cos(i*dig)

//繪制一條終點坐標為dx+x2*s,dy+y2*s的直線

context.lineTo(dx+x2*s,dy+y2*s)

}

//繪制一條從終點(坐標為dx+x2*s,dy+y2*s)到起點的直線

context.closePath()

//結束繪制

context.fill()

}

[HTML5 Canvas 使用圖像]

Title

function draw(id){

let canvas = document.getElementById("canvas")

let context = canvas.getContext("2d")

context.fillStyle = "rgb(238,210,238)"

context.fillRect(0,0,500,500)

//實例化Image()

image = new Image()

image.src = "https://cdn2.jianshu.io/assets/web/nav-logo-4c7bbafe27adc892f3046e6978459bac.png"

image.onload = function () {

drawImage(context,image)

}

}

//在畫布上定位圖像，并規(guī)定圖像的寬度和高度

function drawImage(context,image){

context.drawImage(image,150,190)

}

總結

以上是生活随笔為你收集整理的c html canvas,HTML5 canvas的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。