Canvas基础知识要点
一、基本概念
- Canvas是HTML5中的一个标签，用于在网页上通过JavaScript绘制图形、动画等。它提供了一个空白的、基于像素的绘图区域，就像一块画布，开发者可以在上面使用JavaScript的API来绘制各种图形。
二、常用参数
beginPath、moveTo、lineTo和strokeStyle的应用- 以下是一个简单的示例，使用
canvas绘制一个三角形。
<canvas id="myCanvas" width="200" height="200"></canvas> <script> const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); // 设置线条颜色 ctx.strokeStyle = 'blue'; // 开始一个新路径 ctx.beginPath(); // 移动到起始点 ctx.moveTo(50, 50); // 绘制第一条边 ctx.lineTo(150, 50); // 绘制第二条边 ctx.lineTo(100, 150); // 闭合路径（对于填充图形很重要，这里主要是为了展示完整路径） ctx.closePath(); // 绘制线条 ctx.stroke(); </script>- 在这个例子中：
beginPath用于开始一个新的绘制路径。这是很重要的，因为如果不使用它，后续的绘制命令会和之前的路径合并。moveTo将绘图“笔尖”移动到指定的坐标(50, 50)，这个点是三角形的一个顶点。lineTo用于从当前点（由moveTo指定或者上一个lineTo结束的点）绘制一条直线到指定的坐标。这里绘制了三角形的两条边。strokeStyle用于设置线条的颜色，这里设置为蓝色。最后stroke方法用于实际绘制路径的轮廓。
- 以下是一个简单的示例，使用
arc的应用- 下面的示例绘制一个圆形。
<canvas id="myCanvas" width="200" height="200"></canvas> <script> const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); ctx.beginPath(); // 圆心坐标为(100, 100)，半径为50，起始角度为0，结束角度为2 * Math.PI（一个完整的圆） ctx.arc(100, 100, 50, 0, 2 * Math.PI); ctx.strokeStyle ='red'; ctx.stroke(); </script>- 对于
arc方法：- 它的参数依次是圆心的
x坐标、圆心的y坐标、圆的半径、起始弧度和结束弧度。这里通过设置起始弧度为0，结束弧度为2 * Math.PI（约等于6.28）来绘制一个完整的圆。圆心坐标为(100, 100)，半径为50。最后设置线条颜色为红色并绘制出圆形。
- 它的参数依次是圆心的
quadraticCurveTo的应用- 这个方法用于绘制二次贝塞尔曲线。下面是一个简单的示例，绘制一条二次贝塞尔曲线。
<canvas id="myCanvas" width="200" height="200"></canvas> <script> const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(20, 180); // 控制点坐标为(100, 20)，结束点坐标为(180, 180) ctx.quadraticCurveTo(100, 20, 180, 180); ctx.strokeStyle = 'green'; ctx.stroke(); </script>- 解释：
- 首先
moveTo将起始点设置为(20, 180)。然后quadraticCurveTo方法用于绘制二次贝塞尔曲线，它有三个参数。第一个参数是控制点的x坐标，第二个参数是控制点的y坐标，第三个参数是曲线结束点的x坐标和y坐标。在这个例子中，控制点是(100, 20)，结束点是(180, 180)。最后设置线条颜色为绿色并绘制出曲线。
- 首先
- 渐变的应用（线性渐变）
- 以下示例展示如何在
canvas中使用线性渐变。
<canvas id="myCanvas" width="200" height="200"></canvas> <script> const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); // 创建一个线性渐变对象 const linearGradient = ctx.createLinearGradient(0, 0, 200, 0); linearGradient.addColorStop(0,'red'); linearGradient.addColorStop(1, 'blue'); ctx.beginPath(); ctx.lineWidth = 50; ctx.moveTo(0, 0); ctx.lineTo(200, 0); ctx.strokeStyle = linearGradient; ctx.stroke(); </script>- 步骤如下：
- 首先使用
createLinearGradient方法创建一个线性渐变对象。它的参数是渐变的起始点x坐标、起始点y坐标、结束点x坐标和结束点y坐标。这里创建的是一个从左到右（x轴方向）的渐变。 - 然后使用
addColorStop方法为渐变添加颜色停止点。第一个参数是位置（取值范围是0到1），第二个参数是颜色。这里在0位置添加红色，在1位置添加蓝色。 - 接着开始路径，绘制一条直线（从
(0, 0)到(200, 0)），并将strokeStyle设置为刚才创建的线性渐变，最后绘制出渐变线条。
- 首先使用
- 以下示例展示如何在
- 填充应用（
fill）- 以下示例绘制一个填充颜色的矩形。
<canvas id="myCanvas" width="200" height="200"></canvas> <script> const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.rect(50, 50, 100, 100); ctx.fillStyle = 'yellow'; ctx.fill(); </script>- 解释：
- 首先
beginPath开始一个新路径，然后rect方法用于定义一个矩形，它的参数依次是矩形左上角的x坐标、左上角的y坐标、矩形的宽度和高度。这里定义了一个左上角坐标为(50, 50)，宽度为100，高度为100的矩形。 fillStyle设置填充颜色为黄色，最后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> <!-- id：标识元素的唯一性 width:画布的宽度 height:画布的高度 --> <canvas id="c1" width="600" height="400"> 当前浏览器不支持canvas，请下载最新的浏览器 <a href="https://www.google.cn/intl/zh-CN/chrome/">立即下载</a> </canvas> <script> // 1. 找到画布 var c1 = document.getElementById("c1"); // 判断是否有getContext if (!c1.getContext) { console.log("当前浏览器不支持canvas，请下载最新的浏览器"); } // 2. 获取画笔，上下文对象 var ctx = c1.getContext("2d"); 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, 65, 5, 0, Math.PI * 2); ctx.stroke(); ctx.closePath(); ctx.beginPath(); // 绘制右眼 ctx.arc(90, 65, 5, 0, Math.PI * 2); ctx.closePath(); ctx.stroke(); </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> <style> * { margin: 0; padding: 0; } #ggk { width: 600px; height: 400px; font-size: 30px; font-weight: 900; text-align: center; line-height: 400px; overflow: hidden; position: absolute; left: 0; top: 0; } canvas { position: absolute; left: 0; top: 0; z-index: 10; } </style> </head> <body> <!-- id：标识元素的唯一性 width:画布的宽度 height:画布的高度 --> <div id="ggk">谢谢惠顾</div> <canvas id="c1" width="600" height="400"></canvas> <script> // 1. 找到画布 var c1 = document.getElementById("c1"); // 2. 获取画笔，上下文对象 var ctx = c1.getContext("2d"); // 3. 绘制图形 let img = new Image(); img.src = "./imgs/m2.png"; img.onload = function () { ctx.drawImage(img, 0, 0, 600, 400); }; var isDraw = false; c1.onmousedown = function () { isDraw = true; }; c1.onmouseup = function () { isDraw = false; }; c1.onmousemove = function (e) { if (isDraw) { var x = e.pageX; var y = e.pageY; ctx.globalCompositeOperation = "destination-out"; ctx.arc(x, y, 20, 0, 2 * Math.PI); ctx.fill(); } }; let random = Math.random(); if (random < 0.1) { var ggkDiv = document.querySelector("#ggk"); ggkDiv.innerHTML = "恭喜您获得canvas 惊喜镜头大奖！"; } </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>
<!--
id：标识元素的唯一性
width:画布的宽度
height:画布的高度
-->
<canvas id="c1" width="600" height="400">
当前浏览器不支持canvas，请下载最新的浏览器
<a href="https://www.google.cn/intl/zh-CN/chrome/">立即下载</a>
</canvas>
<script>
// 1. 找到画布
var c1 = document.getElementById("c1");
// 判断是否有getContext
if (!c1.getContext) {
console.log("当前浏览器不支持canvas，请下载最新的浏览器");
}
// 2. 获取画笔，上下文对象
var ctx = c1.getContext("2d");
// 文字，大小/字体
ctx.strokeStyle = "#ff0000";
ctx.font = "100px Microsoft YaHei";
// 填充渲染文字
// fillText(文本，文本的起点x,文本起点的y,绘制文字最大的宽度)
// ctx.fillText("你好", 300, 200, 100);
// 文本对齐选项textAlign,start(默认),end,left,right,center
ctx.textAlign = "center";
// 文本基线对齐,textBaseline,top,bottom,alphabetic
ctx.textBaseline = "middle";
// 文本的方向
// ctx.direction = "rtl";
// 预测量文本宽度
let text = ctx.measureText("Hello world!");
console.log(text);
ctx.strokeText("Hello world!", 300, 200);
ctx.arc(270, 200, 5, 0, 2 * Math.PI);
ctx.fill();
</script>
</body>
</html>
四、场景应用说明
- 数据可视化
- Canvas在数据可视化领域应用广泛。例如，可以使用Canvas绘制柱状图、折线图、饼图等。
- 以绘制简单的柱状图为例，通过获取数据集中每个数据项的值，根据画布的尺寸和数据范围，使用
fillRect方法绘制不同高度的矩形来表示数据。这样可以直观地展示数据的大小关系和分布情况。
- 游戏开发
- 在网页游戏开发中，Canvas是重要的工具。可以用于绘制游戏角色、地图、道具等各种游戏元素。
- 例如，在一个2D横版过关游戏中，通过不断更新游戏角色的位置（使用
translate等方法），并重新绘制游戏场景（包括背景、障碍物、敌人等），实现游戏的动态效果。同时，可以通过处理用户的输入事件（如键盘按键或鼠标点击）来控制游戏角色的行为。
- 动画制作
- Canvas可以制作各种动画，如简单的图形动画、加载动画等。
- 比如制作一个旋转的正方形动画。通过
setInterval或requestAnimationFrame函数，在每一帧中更新正方形的旋转角度，然后重新绘制这个带有旋转效果的正方形，从而实现动画效果。requestAnimationFrame是更推荐的方式，因为它会根据浏览器的刷新率来优化动画的性能。
完结
扫一扫
675
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
