微信快速登陆后完善资料wordpressseo网络营销技术
文章目录
- Canvas基础知识要点
- 一、基本概念
- 二、常用参数
- 三、实例
- 四、场景应用说明
- 完结
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");// 判断是否有getContextif (!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");// 判断是否有getContextif (!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,centerctx.textAlign = "center";// 文本基线对齐,textBaseline,top,bottom,alphabeticctx.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是更推荐的方式，因为它会根据浏览器的刷新率来优化动画的性能。
完结
