canvas基础
大约 9 分钟
canvas基础
基础画布
<!--
id:标识元素的唯一性
width:画布的宽度
height:画布的高度
-->
<canvas id="c1" width="600" height="600">
当前浏览器版本不支持canvas，请升级浏览器
</canvas>
<script>
// 1.找到画布
let c1 = document.getElementById('c1')
// 判断是否有getContext
if (!c1.getContext) {
console.warn('当前浏览器版本不支持canvas，请升级浏览器')
}
// 2.获取画笔，上下文对象
let ctx = c1.getContext('2d')
console.log('ctx :>> ', ctx)
// 3.绘制图形
// 3.1绘制矩形 .fillRect(位置x,位置y,宽度,高度)
ctx.fillRect(100, 100, 100, 100)
</script>
填充与路径绘制
<canvas id="c2" width="600" height="600">
当前浏览器版本不支持canvas，请升级浏览器
</canvas>
<script>
var c2 = document.getElementById('c2')
var ctx = c2.getContext('2d')
console.log('ctx :>> ', ctx)
// 填充矩形
// ctx.fillRect(100, 100, 200, 120)
// 矩形路径 strokeRect(x1, y1, width, height)
// ctx.strokeRect(100, 100, 200, 100)
// 拆开写
// ctx.rect(100, 100, 200, 120) // 绘制路径
// ctx.fill() // 填充颜色
// 拆开路径绘制
ctx.rect(100, 100, 200, 120) // 绘制路径
ctx.stroke() // 填充颜色
</script>
矩形绘制-清除模式
<canvas id="c2" width="600" height="600">
当前浏览器版本不支持canvas，请升级浏览器
</canvas>
<script>
var c2 = document.getElementById('c2')
var ctx = c2.getContext('2d')
console.log('ctx :>> ', ctx)
// 填充矩形
// ctx.fillRect(100, 100, 200, 120)
// 矩形路径 strokeRect(x1, y1, width, height)
// ctx.strokeRect(100, 100, 200, 100)
// ctx.fillRect(200, 150, 200, 100)
/************ 拆开写 *************/
// beginPath 和 closePath 可以完成路径分段
ctx.beginPath() // 开始画笔
ctx.rect(200, 150, 200, 100) // 绘制矩形
ctx.stroke() // 显示路径
ctx.closePath() // 结束画笔
ctx.beginPath()
ctx.rect(100, 100, 200, 100) // 绘制矩形
ctx.fill() // 填充矩形
ctx.closePath()
// 定时器清除
let height = 0
let setV = setInterval(() => {
height++
ctx.clearRect(0, 0, c2.clientWidth, height)
if (height > c2.clientHeight) {
clearInterval(setV)
}
}, 10)
</script>
圆弧
<canvas id="c1" width="600" height="600">
当前浏览器版本不支持canvas，请升级浏览器
</canvas>
<script>
// 1.找到画布
let c1 = document.getElementById('c1')
// 判断是否有getContext
if (!c1.getContext) {
console.warn('当前浏览器版本不支持canvas，请升级浏览器')
}
// 2.获取画笔，上下文对象
let ctx = c1.getContext('2d')
// 3.绘制图形
// 3.1绘制圆弧 ctx.arc(圆心x,圆心y,半径,开始的角度,结束的角度,顺时针还是逆时针，默认是顺时针为false)
ctx.arc(300, 200, 50, 0, Math.PI * Math.random(), true)
ctx.stroke()
// ctx.fill()
</script>
使用圆弧绘制笑脸
<canvas id="c1" width="600" height="600">
当前浏览器版本不支持canvas，请升级浏览器
</canvas>
<script>
// 1.找到画布
let c1 = document.getElementById('c1')
// 判断是否有getContext
if (!c1.getContext) {
console.warn('当前浏览器版本不支持canvas，请升级浏览器')
}
// 2.获取画笔，上下文对象
let ctx = c1.getContext('2d')
// 3.绘制图形
// 3.1绘制圆弧 ctx.arc(圆心x,圆心y,半径,开始的角度,结束的角度,顺时针还是逆时针)
// 第六个参数：顺时针还是逆时针，默认是顺时针为false，可以省略不写
// 绘制脸
ctx.beginPath()
ctx.arc(75, 75, 50, 0, Math.PI * 2)
ctx.stroke()
ctx.closePath()
// 绘制嘴巴
ctx.beginPath()
ctx.arc(75, 75, 35, 0, Math.PI)
ctx.stroke()
ctx.closePath()
// 绘制眼睛-左
ctx.beginPath()
ctx.arc(60, 60, 5, 0, Math.PI * 2)
ctx.stroke()
ctx.closePath()
// 绘制眼睛-右
ctx.beginPath()
ctx.arc(90, 60, 5, 0, Math.PI * 2)
ctx.stroke()
ctx.closePath()
</script>
使用moveTo来移动点
<canvas id="c1" width="600" height="600">
当前浏览器版本不支持canvas，请升级浏览器
</canvas>
<script>
// 1.找到画布
let c1 = document.getElementById('c1')
// 判断是否有getContext
if (!c1.getContext) {
console.warn('当前浏览器版本不支持canvas，请升级浏览器')
}
// 2.获取画笔，上下文对象
let ctx = c1.getContext('2d')
// 3.绘制图形
// 3.1绘制圆弧 ctx.arc(圆心x,圆心y,半径,开始的角度,结束的角度,顺时针还是逆时针)
// 第六个参数：顺时针还是逆时针，默认是顺时针为false，可以省略不写
// 绘制脸
ctx.beginPath()
ctx.arc(75, 75, 50, 0, Math.PI * 2)
ctx.moveTo(110, 75)
// 绘制嘴巴
ctx.arc(75, 75, 35, 0, Math.PI)
ctx.moveTo(65, 65)
// 绘制眼睛-左
ctx.arc(60, 60, 5, 0, Math.PI * 2)
// 绘制眼睛-右
ctx.moveTo(95, 65)
ctx.arc(90, 60, 5, 0, Math.PI * 2)
ctx.stroke()
ctx.closePath()
</script>
绘制线段
<canvas id="c1" width="600" height="600">
当前浏览器版本不支持canvas，请升级浏览器
</canvas>
<script>
// 1.找到画布
let c1 = document.getElementById('c1')
// 判断是否有getContext
if (!c1.getContext) {
console.warn('当前浏览器版本不支持canvas，请升级浏览器')
}
// 2.获取画笔，上下文对象
let ctx = c1.getContext('2d')
// 3.绘制图形
ctx.beginPath()
ctx.moveTo(300, 200)
// lineTo(x,y) 绘制一条从当前位置x以及y位置的直线
ctx.lineTo(350, 250)
ctx.stroke()
ctx.closePath()
</script>
绘制三角形
<canvas id="c1" width="600" height="600">
当前浏览器版本不支持canvas，请升级浏览器
</canvas>
<script>
// 1.找到画布
let c1 = document.getElementById('c1')
// 判断是否有getContext
if (!c1.getContext) {
console.warn('当前浏览器版本不支持canvas，请升级浏览器')
}
// 2.获取画笔，上下文对象
let ctx = c1.getContext('2d')
// 3.绘制图形
ctx.beginPath()
ctx.lineTo(300, 200)
ctx.lineTo(350, 250)
ctx.lineTo(350, 200)
ctx.lineTo(300, 200)
ctx.stroke()
ctx.closePath()
ctx.beginPath()
ctx.lineTo(200, 100)
ctx.lineTo(250, 150)
ctx.lineTo(250, 100)
ctx.lineTo(200, 100)
ctx.fill() // 填充颜色
ctx.stroke()
ctx.closePath()
</script>
arcTo绘制圆弧方式
<canvas id="c1" width="600" height="600">
当前浏览器版本不支持canvas，请升级浏览器
</canvas>
<script>
// 1.找到画布
let c1 = document.getElementById('c1')
// 判断是否有getContext
if (!c1.getContext) {
console.warn('当前浏览器版本不支持canvas，请升级浏览器')
}
// 2.获取画笔，上下文对象
let ctx = c1.getContext('2d')
// 3.绘制图形
ctx.beginPath()
// 第一个点
ctx.moveTo(300, 200)
// 第二个点和第三个，以及圆弧的半径
ctx.arcTo(300, 250, 250, 250, 25)
ctx.stroke()
ctx.closePath()
</script>
二次贝塞尔曲线实现聊天气泡框
<canvas id="c1" width="600" height="600">
当前浏览器版本不支持canvas，请升级浏览器
</canvas>
<script>
// 1.找到画布
let c1 = document.getElementById('c1')
// 判断是否有getContext
if (!c1.getContext) {
console.warn('当前浏览器版本不支持canvas，请升级浏览器')
}
// 2.获取画笔，上下文对象
let ctx = c1.getContext('2d')
// 3.绘制图形
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.stroke()
</script>
三次贝塞尔曲线实现爱心
<canvas id="c1" width="600" height="600">
当前浏览器版本不支持canvas，请升级浏览器
</canvas>
<script>
/** @type {HTMLCanvasElement} */
// 1.找到画布
let c1 = document.getElementById('c1')
// 判断是否有getContext
if (!c1.getContext) {
console.warn('当前浏览器版本不支持canvas，请升级浏览器')
}
// 2.获取画笔，上下文对象
let ctx = c1.getContext('2d')
// 3.绘制图形'
ctx.beginPath()
// 起点
ctx.moveTo(300, 200)
// 两个控制点，一个重点
ctx.bezierCurveTo(350, 150, 400, 200, 300, 250)
ctx.bezierCurveTo(200, 200, 250, 150, 300, 200)
ctx.stroke()
ctx.closePath()
</script>
封装路径
<canvas id="c1" width="600" height="600">
当前浏览器版本不支持canvas，请升级浏览器
</canvas>
<script>
/** @type {HTMLCanvasElement} */
// 1.找到画布
let c1 = document.getElementById('c1')
// 判断是否有getContext
if (!c1.getContext) {
console.warn('当前浏览器版本不支持canvas，请升级浏览器')
}
// 2.获取画笔，上下文对象
let ctx = c1.getContext('2d')
// 3.绘制图形'
var heartPath = new Path2D()
console.log('heartPath :>> ', heartPath)
// 起点
heartPath.moveTo(300, 200)
// 两个控制点，一个重点
heartPath.bezierCurveTo(350, 150, 400, 200, 300, 250)
heartPath.bezierCurveTo(200, 200, 250, 150, 300, 200)
ctx.stroke(heartPath)
ctx.fill(heartPath)
// 绘制聊天框
var chatPaht = new Path2D()
chatPaht.moveTo(200, 300)
chatPaht.quadraticCurveTo(150, 300, 150, 200)
chatPaht.quadraticCurveTo(150, 100, 300, 100)
chatPaht.quadraticCurveTo(450, 100, 450, 200)
chatPaht.quadraticCurveTo(450, 300, 250, 300)
chatPaht.quadraticCurveTo(250, 350, 150, 350)
chatPaht.quadraticCurveTo(200, 350, 200, 300)
ctx.stroke(chatPaht)
// 创建折线 开始坐标 高度，宽度 高度 z回到初始坐标
var polyline = new Path2D('M10 10 h 80 v 80 h -80 z')
ctx.stroke(polyline)
</script>
颜色设置
<canvas id="c1" width="600" height="600">
当前浏览器版本不支持canvas，请升级浏览器
</canvas>
<script>
/** @type {HTMLCanvasElement} */
// 1.找到画布
let c1 = document.getElementById('c1')
// 判断是否有getContext
if (!c1.getContext) {
console.warn('当前浏览器版本不支持canvas，请升级浏览器')
}
// 2.获取画笔，上下文对象
let ctx = c1.getContext('2d')
// 3.绘制图形
// 设置全局透明度
ctx.globalAlpha = 0.5
// 绘制爱心
var heartPath = new Path2D()
heartPath.moveTo(300, 200)
heartPath.bezierCurveTo(350, 150, 400, 200, 300, 250)
heartPath.bezierCurveTo(200, 200, 250, 150, 300, 200)
ctx.stroke(heartPath)
ctx.fill(heartPath)
// 绘制聊天框
var chatPaht = new Path2D()
chatPaht.moveTo(200, 300)
chatPaht.quadraticCurveTo(150, 300, 150, 200)
chatPaht.quadraticCurveTo(150, 100, 300, 100)
chatPaht.quadraticCurveTo(450, 100, 450, 200)
chatPaht.quadraticCurveTo(450, 300, 250, 300)
chatPaht.quadraticCurveTo(250, 350, 150, 350)
chatPaht.quadraticCurveTo(200, 350, 200, 300)
ctx.strokeStyle = 'green'
ctx.strokeStyle = '#ff00ff'
ctx.stroke(chatPaht)
ctx.fillStyle = 'rgba(255, 200, 200, 0.3)'
// 创建折线 开始坐标 高度，宽度 高度 z回到初始坐标
let polyline = new Path2D('M10 10 h 80 v 80 h -80 z')
// 设置图像颜色
ctx.strokeStyle = 'red'
// 绘制图像
ctx.stroke(polyline)
ctx.fillRect(280, 180, 100, 40)
ctx.fillStyle = '#de4336'
</script>
线性渐变
<canvas id="c1" width="600" height="600">
当前浏览器版本不支持canvas，请升级浏览器
</canvas>
<script>
/** @type {HTMLCanvasElement} */
// 1.找到画布
let c1 = document.getElementById('c1')
// 判断是否有getContext
if (!c1.getContext) {
console.warn('当前浏览器版本不支持canvas，请升级浏览器')
}
// 2.获取画笔，上下文对象
let ctx = c1.getContext('2d')
// 3.绘制图形
// 创建绘制线性渐变 createLinearGradient(x0: number, y0: number, x1: number, y1: number)
// let linearGradient = ctx.createLinearGradient(0, 0, 600, 600)
// // 添加颜色 addColorStop(offset: number, color: string)
// linearGradient.addColorStop(0, 'red')
// // linearGradient.addColorStop(0.5, 'blue')
// // linearGradient.addColorStop(0.8, 'orange')
// linearGradient.addColorStop(1, 'pink')
// ctx.fillStyle = linearGradient
// // 绘制矩形 fillRect(x: number, y: number, w: number, h: number)
// ctx.fillRect(100, 200, 300, 300)
// 创建扫描动画
let index = 0
function render() {
// 清空整个画布
ctx.clearRect(0, 0, 600, 600)
index += 0.005
if (index > 1) {
index = 0
}
// 创建绘制线性渐变 createLinearGradient(x0: number, y0: number, x1: number, y1: number)
let linearGradient = ctx.createLinearGradient(0, 0, 600, 600)
// 添加颜色 addColorStop(offset: number, color: string)
linearGradient.addColorStop(0, 'red')
linearGradient.addColorStop(index, 'orange')
linearGradient.addColorStop(1, 'pink')
ctx.fillStyle = linearGradient
// 绘制矩形 fillRect(x: number, y: number, w: number, h: number)
ctx.fillRect(100, 200, 300, 300)
requestAnimationFrame(render)
}
requestAnimationFrame(render)
</script>
径向渐变
<canvas id="c1" width="600" height="600">
当前浏览器版本不支持canvas，请升级浏览器
</canvas>
<script>
/** @type {HTMLCanvasElement} */
// 1.找到画布
let c1 = document.getElementById('c1')
// 判断是否有getContext
if (!c1.getContext) {
console.warn('当前浏览器版本不支持canvas，请升级浏览器')
}
// 2.获取画笔，上下文对象
let ctx = c1.getContext('2d')
// 3.绘制图形
let index = 0
let radiaGradinet = ctx.createConicGradient(300, 200, 0, 300, 200, 100)
radiaGradinet.addColorStop(0, 'red')
radiaGradinet.addColorStop(0.3, 'orange')
radiaGradinet.addColorStop(1, 'pink')
ctx.fillStyle = radiaGradinet
ctx.fillRect(0, 0, 600, 600)
</script>