画笔颜色设置
ctx.strokeStyle = "颜色"
:设置轮廓描绘颜色
ctx.fillStyle = "颜色"
:设置填充颜色
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- -->
<canvas
id = "canvas1"
width="600"
height="600"
style="background: lightgray"
></canvas>
<script>
// 找到画布
var canvas1 = document.getElementById("canvas1")
// 获取画笔(这里是2d画笔)
var ctx = canvas1.getContext("2d")
// 绘制图形
ctx.beginPath()
ctx.moveTo(200,300)
ctx.quadraticCurveTo(150,300,150,200)
ctx.quadraticCurveTo(150,100,300,100)
ctx.quadraticCurveTo(450,100,450,200)
ctx.quadraticCurveTo(450,300,250,300)
ctx.quadraticCurveTo(250,350,150,350)
ctx.quadraticCurveTo(200,350,200,300)
// 修改绘制轮廓的颜色
ctx.strokeStyle = "red"
ctx.stroke()
// 修改填充颜色
ctx.fillStyle = "rgba(255,200,200,0.3)"
ctx.fill()
ctx.closePath()
</script>
</body>
</html>
全局透明度
画笔.globalAlpha = 0到1的数字
eg:
var canvas1 = document.getElementById("canvas1")
// 获取画笔(这里是2d画笔)
var ctx = canvas1.getContext("2d")
ctx.globalAlpha = 0.3
渐变色
线性渐变
定义渐变:
画笔.createLinearGradient(x1,y1,x2,y2)
: x1、y1渐变的起点;x2、y2渐变的终点
linearGradient.addColorStop(0,"red")
: 设置渐变的颜色:0表示起点颜色,1表示终点颜色
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- -->
<canvas
id = "canvas1"
width="600"
height="600"
style="background: lightgray"
></canvas>
<script>
// 找到画布
var canvas1 = document.getElementById("canvas1")
// 获取画笔(这里是2d画笔)
var ctx = canvas1.getContext("2d")
// 渐变色
// createLinearGradient(x1,y1,x2,y2), x1\y1渐变的起点,x2\y2渐变的终点
let linearGradient = ctx.createLinearGradient(100,200,400,400)
// addColorStop设置渐变颜色 0表示起点颜色,1表示终点颜色
linearGradient.addColorStop(0,"red")
// linearGradient.addColorStop(0.5,"#ffcccc")
linearGradient.addColorStop(1,"blue")
// 将渐变设置为填充样式
ctx.fillStyle = linearGradient
ctx.rect(100, 200, 300, 200)
ctx.fill()
</script>
</body>
</html>
动画渲染
效果:
白色条动态的从左上角移动到右下角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- -->
<canvas
id = "canvas1"
width="600"
height="600"
style="background: lightgray"
></canvas>
<script>
// 找到画布
var canvas1 = document.getElementById("canvas1")
// 获取画笔(这里是2d画笔)
var ctx = canvas1.getContext("2d")
let index = 0
function render(){
ctx.clearRect(0,0,600,600)
index+=0.01;
if(index>1){
index = 0
}
let linearGradient = ctx.createLinearGradient(100,200,400,400)
linearGradient.addColorStop(0,"red")
linearGradient.addColorStop(index,"rgba(255,255,255,0.5)")
linearGradient.addColorStop(1,"blue")
ctx.fillStyle = linearGradient
ctx.rect(100, 200, 300, 200)
ctx.fill()
requestAnimationFrame(render)
}
// 动画渲染
requestAnimationFrame(render)
</script>
</body>
</html>
径向渐变
从圆心向外渐变。
createRadialGradient(x1,y1,r1,x2,y2,r2)
: x1,y1,r1表示以(x1,y1)为坐标r1为半径的圆,x2,y2,r2表示以(x2,y3)为坐标r2为半径的圆。
radialGradient.addColorStop(0,"red")
:表示起点的颜色
radialGradient.addColorStop(1,"blue")
:表示终点的颜色
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- -->
<canvas
id = "canvas1"
width="600"
height="600"
style="background: lightgray"
></canvas>
<script>
// 找到画布
var canvas1 = document.getElementById("canvas1")
// 获取画笔(这里是2d画笔)
var ctx = canvas1.getContext("2d")
let index = 0
// createRadialGradient(x1,y1,r1,x2,y2,r2)
// x1,y1,r1表示以(x1,y1)为坐标r1为半径的园,x2,y2,r2表示以(x2,y3)为坐标r2为半径的原
let radialGradient = ctx.createRadialGradient(300,300,0,300,300,200)
radialGradient.addColorStop(0,"red")
// radialGradient.addColorStop(index,"rgba(255,255,255,0.5)")
radialGradient.addColorStop(1,"blue")
ctx.fillStyle = radialGradient
ctx.rect(0, 0, 600, 600)
ctx.fill()
// requestAnimationFrame(render)
// }
</script>
</body>
</html>
圆形:
let radialGradient = ctx.createRadialGradient(300,300,0,300,300,200)
radialGradient.addColorStop(0,"red")
// radialGradient.addColorStop(index,"rgba(255,255,255,0.5)")
radialGradient.addColorStop(1,"blue")
ctx.fillStyle = radialGradient
ctx.arc(300,300, 200,0, Math.PI*2)
ctx.fill()
球体描绘
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- -->
<canvas
id = "canvas1"
width="600"
height="600"
style="background: lightgray"
></canvas>
<script>
// 找到画布
var canvas1 = document.getElementById("canvas1")
// 获取画笔(这里是2d画笔)
var ctx = canvas1.getContext("2d")
let radialGradient = ctx.createRadialGradient(200,200,10,300,300,200)
radialGradient.addColorStop(0,"white")
radialGradient.addColorStop(1,"blue")
ctx.fillStyle = radialGradient
ctx.arc(300,300, 200,0, Math.PI*2)
ctx.fill()
</script>
</body>
</html>
圆锥渐变
createConeGradient(r,x1,y1)
r:开始渐变的角度,(x1, y1)
渐变旋转的圆心
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- -->
<canvas
id = "canvas1"
width="600"
height="600"
style="background: lightgray"
></canvas>
<script>
// 找到画布
var canvas1 = document.getElementById("canvas1")
// 获取画笔(这里是2d画笔)
var ctx = canvas1.getContext("2d")
// createConeGradient(r,x1,y1):r:开始渐变的角度,x1,y1渐变旋转的圆心
let coneGradient = ctx.createConicGradient(0,300,300)
coneGradient.addColorStop(0,"white")
coneGradient.addColorStop(1,"blue")
ctx.fillStyle = coneGradient
ctx.rect(0,0, 600,600)
ctx.fill()
</script>
</body>
</html>
效果:
pattern印章填充样式
createPattern(img,重复方式:repeat、no-repeat、repeat-x、repeat-y)
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- -->
<canvas
id = "canvas1"
width="600"
height="600"
style="background: lightgray"
></canvas>
<script>
// 找到画布
var canvas1 = document.getElementById("canvas1")
// 获取画笔(这里是2d画笔)
var ctx = canvas1.getContext("2d")
//createPattern(img,重复方式:repeat、no-repeat、repeat-x、repeat-y)
var img = new Image()
img.src = "./QQ截图20230114005019.png"
img.onload = function(){
let pattern = ctx.createPattern(img, "repeat")
ctx.fillStyle = pattern
ctx.rect(0,0, 600,600)
ctx.fill()
}
</script>
</body>
</html>
线条样式
实线样式
画笔.lineWidth
: 线条宽度,默认1px画笔.lineCap
: 线条末端样式
butt平齐;round半圆; square正方形(线段末尾就会多出来一个正方形)画笔.lineJoin
:线条与线条连接处的样式,只设置外侧的连接效果
mitter尖角,round圆角,bevel平角。
画笔.miterLimit
:当lineJoin设置为尖角时有起作用,用于设置线条的尖角的最大长度,超过该长度以平角显示。
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- -->
<canvas
id = "canvas1"
width="600"
height="600"
style="background: lightgray"
></canvas>
<script>
// 找到画布
var canvas1 = document.getElementById("canvas1")
// 获取画笔(这里是2d画笔)
var ctx = canvas1.getContext("2d")
// 线条宽度,默认1px
ctx.lineWidth = 40;
// 线条末端样式,butt平齐,round半圆, square正方形(线段末尾就会多出来一个正方形)
ctx.lineCap = "round"
// 设置线条与线条连接处的样式(只设置外侧的连接效果), mitter尖角,round圆角,bevel平角,
ctx.lineJoin = "mitter"
// 设置最大尖角长度
ctx.miterLimit = 1
ctx.moveTo(200,150)
ctx.lineTo(300,200)
ctx.lineTo(400,150)
ctx.stroke();
</script>
</body>
</html>
虚线样式
画笔.setLineDash([线段长度,空白长度])
:setLineDash方法接受一个数组,来指定线段与间隙的交替。
画笔.lineDashOffset = 偏移量
: 属性设置起始偏移量。
eg:设置虚线的动态偏移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- -->
<canvas
id = "canvas1"
width="600"
height="600"
style="background: lightgray"
></canvas>
<script>
// 找到画布
var canvas1 = document.getElementById("canvas1")
var ctx = canvas1.getContext("2d")
let index = 0
function render(){
ctx.clearRect(0,0,600,600)
index ++;
if(index>40){
index = 0;
}
ctx.lineWidth = 1;
ctx.lineCap = "round"
ctx.lineJoin = "mitter"
// 设置虚线
ctx.setLineDash([10,5])
ctx.lineDashOffset = index
ctx.moveTo(150,150)
ctx.lineTo(300,200)
ctx.lineTo(450,150)
ctx.stroke();
// 请求动画帧
requestAnimationFrame(render)
}
requestAnimationFrame(render)
</script>
</body>
</html>
阴影
画笔.shadowOffsetX
:水平偏移量
画笔.shadowOffsetY
:垂直偏移量
画笔.shadowBlur
:阴影模糊度
画笔.shadowColor
:阴影颜色
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- -->
<canvas
id = "canvas1"
width="600"
height="600"
style="background: lightgray"
></canvas>
<script>
// 找到画布
var canvas1 = document.getElementById("canvas1")
var ctx = canvas1.getContext("2d")
ctx.lineWidth = 1;
// 设置虚线
ctx.setLineDash([10,5])
// 设置阴影
// 水平偏移量
ctx.shadowOffsetX = 10
// 垂直偏移量
ctx.shadowOffsetY = 10
// 模糊度
ctx.shadowBlur = 10
// 阴影颜色
ctx.shadowColor = "red"
ctx.moveTo(150,150)
ctx.lineTo(300,200)
ctx.lineTo(450,150)
ctx.stroke();
</script>
</body>
</html>