简单认识canvas

最新推荐文章于 2024-09-08 21:29:56 发布

m0_48762795

最新推荐文章于 2024-09-08 21:29:56 发布

阅读量78

点赞数 1

文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_48762795/article/details/131796413

版权

本文介绍了HTML5的canvas元素，用于使用JavaScript进行图形绘制。内容包括设置2d绘图环境、绘制线段、填充规则、绘制矩形、圆形和椭圆，以及如何创建线性和径向渐变效果。示例代码详细展示了各种图形的绘制方法和样式设置。

摘要由CSDN通过智能技术生成

认识 canvas

canvas 是一个可以使用脚本 JavaScript来绘制图形的 HTML元素。例如，它可以用于绘制图表、制作图片构图或者制作简单的动画。

canvas绘制的准备工作

 //准备画布
 <head>
     <style>
         canvas{
             border:2px solid;
         }
     </style>
 </head>
 <body>
	 <canvas width="800" height="600"></canvas> //注意canvas的宽高只能设置行内样式，不能设置css属性
	 <script>
	     //1. 获取canvas
	     let canvas = document.querySelector('canvas');
	     //2. 获取canvas的2d环境
	     let ctx = canvas.getContext('2d');
	  </script>
  </body>

错误：
在这里插入图片描述
原因：没有设置2d环境

canvas 绘制线段

moveTo(x,y) : 设置上下文绘制路径的起点
lineTo(x,y) : 绘制直线，从x,y的位置绘制一条直线到起点或都上一个线头点。
beginPath() : 开始路径，将不同绘制的形状进行隔离，每次执行此方法，表示重新绘制一个路径。
closePath(): 闭合路径，会自动把最后的线头和开始的线头连在一起。
stroke() : 根据路径绘制线。

 <canvas width="800" height="600"></canvas>
 <script>
     let canvas = document.querySelector('canvas');
     let ctx = canvas.getContext('2d');
     //绘制三角形
     ctx.beginPath(); //开始路径
     ctx.moveTo(100,100); //三角形，左顶点
     ctx.lineTo(300,100); //右顶点
     ctx.lineTo(300,300); //底部的点
     ctx.closePath(); //结束路径
     ctx.stroke(); //描边路径
 </script>

canvas 绘制线段的样式设置

lineWidth : 边线宽度
strokeStyle ： 线条色
都要设置在stroke()之前

在这里插入图片描述 # canvas 的填充规则

fill() : 填充，是将闭合的路径的内容填充具体的颜色，默认黑色。
fillStyle : 是 Canvas 2D API 使用内部方式描述颜色和样式的属性。默认值是 #000 （黑色）

在这里插入图片描述

ctx.fill();
ctx.fillStyle = 'red';

在这里插入图片描述

ctx.fillStyle = 'red';
ctx.fill();

在这里插入图片描述

canvas 绘制矩形

rect(x,y,width,height) : 快速创建矩形，只是规划了矩形的路径，并没有填充和描边。
getContext() : 是用来获得渲染上下文和它的绘画功能。(2D 图像)
strokeRect(x,y,width,height) : 绘制完路径后立即进行stroke绘制。
fillRect(x,y,width,height) 是 Canvas 2D API绘制填充矩形的方法。当前渲染上下文中的fillStyle 属性决定了对这个矩形的填充样式。
clearRect(x,y,width,height) : 清除某个矩形内的绘制的内容，相当于橡皮擦。

eg:
 <canvas width="800" height="600"></canvas>
 <script>
     //获取canvas标签
     let canvas = document.querySelector('canvas');
     //获取canvas环境 2d
     let ctx = canvas.getContext('2d');
     //绘制填充矩形
     ctx.fillStyle = 'red';
     ctx.fillRect(0,0,100,100);
 
     ctx.fillStyle = 'red';
     ctx.fillRect(100,100,100,100);
     //绘制边线矩形
     ctx.strokeRect(1,1,100,100);
     //填充色
     ctx.fillStyle = 'yellow';
     ctx.fillRect(100,100,100,100);
     //线条色
     ctx.strokeStyle = 'blue';
     //设置边线宽度
     ctx.lineWidth = 5;
     ctx.strokeRect(100,100,100,100);
 
 </script>

在这里插入图片描述

canvas 绘制圆形

arc(x,y,r,sAngle,eAngle,counterclockwise) : 创建弧/曲线（用于创建圆或部分圆）
x,y :圆心坐标
r : 半径大小
sAngle:绘制开始的角度，圆心到最右边点是0度，顺时针方向弧度增大。
eAngle: 结束的角度，注意是弧度（具体使用时，度数也可以画出）
counterclockwise: 是否逆时针。true是逆时针，false:顺时针
弧度和角度的转换公式： rad =deg*Math.PI / 180

<canvas width="800" height="600"></canvas>
 <script>
     let canvas = document.querySelector('canvas');
     let ctx = canvas.getContext('2d');
     //绘制圆形
     ctx.arc(300,300,100,0,360,false);
     ctx.stroke();
 </script>

在这里插入图片描述

canvas 绘制椭圆

ellipse(x,y,radiusX,radiusX,rotation,startAngle,endAngle,onticlockwise)
1.x,y为椭圆的坐标
2.radiusX 长半轴的长度
3. rotation: 椭圆旋转的角度（单位是度不是弧度)
4. startAngle: 为椭圆的起始位置（是弧度，不是度)
5. endAngle: 为椭圆的结束位置（是弧度，不是度）
6. onticlockwise true为逆时针，false为顺时针绘制
1. 弧度 = (Math.PI/100) * 角度
2. 角度 = (180*弧度) / Math.PI 或 180 / Math.PI * 360

  <canvas width="800" height="600"></canvas>
    <script>
        let canvas = document.querySelector('canvas');
        let ctx = canvas.getContext('2d');
        //绘制椭圆
        ctx.beginPath();
        ctx.ellipse(400,300,300,150,0,0,180/Math.PI * 360,false);
        ctx.stroke();
    </script>

canvas 渐变方案

线性渐变

线性渐变，指的是沿着一条直线进行渐变。我们平时在页面开发中，大多数情况都是线性渐变。 createLinearGradient(x1,
y1, x2, y2) : 用来定义从x1 y1到x2 y2的线性渐变 x1 y1 表示渐变开始的横纵坐标 x2
y2表示渐变结束的横纵坐标 addColorStop(value1, color1) :
此方法可以调用n次，第一次表示渐变开始的颜色，第二次表示渐变结束的颜色，第三次会以第二次为开始颜色渐变，以此类推。
value表示渐变的偏移量，取值范围为0-1。value1表示渐变开始的位置，value2表示渐变结束的位置。
color表示渐变颜色，颜色可以使用rgb、十六进制颜色，color1表示渐变开始颜色，color2表示渐变结束颜色。

图形渐变：

 <canvas id="myCanvas" width="200" height="150" style="border: 1px dashed gray;"></canvas>
 <script>
 // 获取canvas对象
   const cnv = document.getElementById('myCanvas')
   // 获取上下文对象context
   const ctx = cnv.getContext('2d')
 
   const gnt = ctx.createLinearGradient(0, 150, 200, 150)
   gnt.addColorStop(0, 'HotPink')
   gnt.addColorStop(1, 'white')
   ctx.fillStyle = gnt
   ctx.fillRect(0, 0, 200, 500)
 </script>

文字渐变：

 <canvas id="myCanvas" width="800" height="150" style="border: 1px dashed gray;"></canvas>
 <script>
 // 获取canvas对象
   const cnv = document.getElementById('myCanvas')
   // 获取上下文对象context
   const ctx = cnv.getContext('2d')
 
   const text = 'JavaScript 是世界上最灵活的语言'
   cxt.font = 'bold 50px 微软雅黑'
 
   const gnt = ctx.createLinearGradient(0, 75, 800, 75)
   gnt.addColorStop(0, 'HotPink')
   gnt.addColorStop(1, 'LightSkyBlue')
 
   ctx.fillStyle = gnt
   ctx.fillText(text, 10, 90)
 </script>

径向渐变

径向渐变，是一种颜色从内到外的渐变，是从一个起点向所有方向进行渐变。 const gnt =
cxt.createRadialGradient(x1, y1, r1, x2, y2, r2)
gnt.addColorStop(value1, color1) gnt.addColorStop(value2, color2)
ctx.fillStyle = gnt ctx.fill() x1 y1 表示渐变开始的圆心坐标，r1 表示渐变开始时圆的半径。 x2,y2表示渐变结束的圆心坐标，r2表示渐变结束时圆的半径。

 <canvas id="myCanvas" width="200" height="150" style="border: 1px dashed gray;"></canvas>
 <script>
 // 获取canvas对象
   const cnv = document.getElementById('myCanvas')
   // 获取上下文对象context
   const ctx = cnv.getContext('2d')
 
   // 画圆
   ctx.beginPath()
   ctx.arc(80, 80, 50, 0, Math.PI * 2, true)
   ctx.closePath()

   // 渐变
   const gnt = ctx.createRadialGradient(100, 60, 10, 80, 80, 50)
   gnt.addColorStop(0, 'white')
   gnt.addColorStop(0.9, 'orange')
   gnt.addColorStop(1, 'rgba(0, 0, 0, 0)')
 
   // 填充
   ctx.fillStyle = gnt
   ctx.fill()
 </script>