canvas入门
文档：https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial
创建canvas画布的两种方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>创建canvas画布的两种方法</title></head><body><!--方法1: 通过标签来创建--><canvas id="canvas1" width="100" height="100" style="background: black"></canvas><script> <!--方法2: 通过js来创建--> const canvas = document.createElement('canvas'); canvas.id = 'canvas2'; canvas.width = 200; canvas.height = 200; canvas.style.background = 'red'; document.body.appendChild(canvas);</script></body></html>绘制各种图形
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>绘制各种图形</title></head><body><canvas id="canvas1"></canvas><script> const canvas = document.getElementById('canvas1') canvas.width = 500 canvas.height = 500 // canvas.style.background = 'red' canvas.style.border = '1px solid black' const ctx = canvas.getContext('2d') // 绘制矩形 ctx.fillStyle = 'red' ctx.fillRect(0, 0, 100, 100) // 绘制圆形 ctx.beginPath() ctx.arc(200, 200, 100, 0, Math.PI * 2) ctx.fillStyle = 'blue' ctx.fill() ctx.closePath() // 绘制椭圆 ctx.beginPath() ctx.ellipse(400, 100, 100, 50, 0, 0, Math.PI * 2) ctx.fillStyle = 'yellow' ctx.fill() ctx.closePath() // 绘制三角形 ctx.beginPath() ctx.moveTo(300, 300) ctx.lineTo(400, 300) ctx.lineTo(350, 400) ctx.closePath() ctx.fillStyle = 'green' ctx.fill() // 绘制文字 ctx.font = '30px Arial' ctx.fillStyle = 'black' ctx.fillText('Hello World', 100, 100) // 绘制图片 const img = new Image() img.src = 'https://www.baidu.com/img/bd_logo1.png' img.onload = function () { ctx.drawImage(img, 0, 100, 100, 100) }</script></body></html>
绘制阴影
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>使用阴影</title></head><body><canvas id="canvas1"></canvas><script> const canvas = document.getElementById('canvas1') canvas.width = 500 canvas.height = 500 // canvas.style.background = 'red' canvas.style.border = '1px solid black' const ctx = canvas.getContext('2d') ctx.beginPath() ctx.shadowBlur = 20 ctx.shadowColor = 'black' ctx.shadowOffsetX = 10 ctx.shadowOffsetY = 10 ctx.arc(200, 200, 100, 0, Math.PI * 2) ctx.fillStyle = 'grey' ctx.fill() ctx.closePath()</script></body></html>