首页 > 其他分享 >canvas的基础使用

canvas的基础使用

时间：2024-06-04 11:29:02浏览次数：23  
标签：10 canvas 基础 ctx 50 使用 100 绘制

目录

1.了解canvas

1.1 canvas元素

<canvas id="myCanvas" width="500" height="500"></canvas>

canvas有两个属性width、height，不设置默认width：300px、height：150px

1.2 兼容性

有些老的IE浏览器不支持<canvas>元素，可以使用内容提示或图片提示

<canvas>
    您的浏览器不支持canvas
    <!-- or -->
    <img src="canvas.png" alt=""> 
</canvas>

1.3 支持性

let canvas = document.getElementById('myCanvas');
//判断是否支持canvas
if (canvas.getContext) {
  console.log('支持')
} else {
  console.log('不支持')
}

2.使用canvas

canvas绘图时以画布左上角坐标为原点（0，0）绘图

2.1 获取canvas绘图上下文

使用canvas.getContext('2d')获取canvas的2d上下文

var ctx = canvas.getContext('2d');

2.2 绘制demo

一个简单例子

<canvas id="myCanvas" width="500" height="500">
  您的浏览器不支持canvas
</canvas>

<script>
  function draw() {
    let canvas = document.getElementById('myCanvas');
    if (!canvas.getContext) return;
    let ctx = canvas.getContext('2d');
    //绘制矩形
    ctx.fillRect(10, 10, 100, 100);
  }
  draw()
</script>

在这里插入图片描述

3.绘制矩形

  1. strokeRect(x, y, width, height)：描边矩形。x,y代表矩形位置，widh, height代表矩形宽高。
  2. fillRect(x, y, width, height)：填充矩形。
  3. clearRect(x, y, widh, height)：清除矩形。
//在(10,10)位置填充一个宽高为100px的矩形
ctx.fillRect(10, 10, 100, 100);
//在(120,10)位置描边矩形
ctx.strokeRect(120, 10, 100, 100);
//在(50,10)位置清除矩形
ctx.clearRect(50, 10, 50, 50);

在这里插入图片描述

4.绘制path

图形是线条构成的，线条是由路径绘制而成。如：三角形就是由三条路径绘制而成。

绘制路径常用步骤：
①创建路径起点：beginPath()
②绘制路径：moveTo(x, y) ，lineTo(x, y) 或 arc(x, y, r, startAngle, endAngle, anticlockwise)
③闭合路径：closePath()
④描边/填充路径：stroke() / fill()
画布上就会显示路径。

4.1 绘制线条 lineTo

1.绘制一条直线

ctx.beginPath() //创建路径
ctx.moveTo(10, 130) //线条起始点移动到10，130
ctx.lineTo(130, 130) //绘制线条终点130，130
ctx.closePath() //闭合路径
ctx.stroke() //描边路径

在这里插入图片描述
2.绘制一个三角形

ctx.beginPath()
ctx.moveTo(30, 130)
ctx.lineTo(130, 130)
ctx.lineTo(100, 180)
ctx.closePath() //closePath 会把起点和终点连成一条线
ctx.stroke()

在这里插入图片描述

4.2 绘制圆 arc

arc(x, y, r, startAngle, endAngle, anticlockwise)：x,y为圆心坐标，r为半径，startAngle起始角度，endAngle终点角度，anticlosewise为旋转方向（true逆时针，false顺时针，默认顺时针）

ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2, false); //绘制圆
ctx.stroke(); //描边

ctx.beginPath();
ctx.arc(220, 100, 50, 0, Math.PI * 2, false); //绘制圆
ctx.fill(); //填充

ctx.beginPath();
ctx.arc(340, 100, 50, 0, Math.PI, false); //绘制半圆
ctx.stroke(); //描边

在这里插入图片描述

5.设置线条宽度、颜色、连接点样式等

5.1 线条宽度 lineWidth

将上方第一个圆线条宽度设置为4个像素

ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2, false);
ctx.lineWidth = 4;
ctx.stroke();

在这里插入图片描述

5.2 颜色 fillStyle、strokeStyle

颜色分为填充颜色fillStyle和描边颜色strokeStyle

ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2, false);
ctx.lineWidth = 4;
ctx.strokeStyle = "rgb(139,193,255)"; //描边颜色rgb/rgba
ctx.stroke();

ctx.beginPath();
ctx.arc(220, 100, 50, 0, Math.PI * 2, false);
ctx.fillStyle = "#F77676"; //填充颜色 #xxxxxx
ctx.fill();

ctx.beginPath();
ctx.arc(340, 100, 50, 0, Math.PI, false);
ctx.lineWidth = 1;
ctx.strokeStyle = "green"; //描边颜色
ctx.stroke();

在这里插入图片描述

5.3 连接点样式 lineJoin

lineJoin有三种样式round、bevel、miter(默认值)
在这里插入图片描述在这里插入图片描述在这里插入图片描述

6. 平移、旋转

6.1 平移 translate

translate(x, y)：用来平移canvas画布的原点的位置

ctx.fillRect(10, 10, 100, 100);

ctx.save() //保存之前状态
ctx.translate(120, 120) //将坐标原点平移到(120,120)位置,此时(120,120)就相当于(0,0)
ctx.fillRect(0, 0, 100, 100); //在0,0位置绘制矩形
ctx.restore() //恢复之前保存的状态

在这里插入图片描述

6.2 旋转 rotate

rotate(angle)：顺时针旋转坐标轴。angle是 旋转弧度，如果想使用角度，可以把角度转成弧度，公式为：deg * Math.PI/180。

ctx.translate(100, 100) //将坐标原点平移到(100,100)位置
ctx.rotate(30 * Math.PI / 180) //旋转坐标轴30度
ctx.fillRect(0, 0, 100, 100);

在这里插入图片描述

7.绘制文字

绘制文字也是两种：填充文字fillText(text, x, y, maxWidth)和描边文字strokeText(text, x, y, maxWidth)

ctx.font = '30px Microsoft yahei';
ctx.fillStyle = 'rgb(139,193,255)'; 
ctx.fillText('文字', 200, 200); //填充文字

ctx.strokeStyle = "green";
ctx.strokeText('文字', 200, 250); //描边文字

在这里插入图片描述

8.绘制图片 drawImage

drawImage(img, x, y, width, height)：img是new Image()创建的img元素，width,height是图片的宽高

let img = new Image();// 创建img
img.onload = function () {
  ctx.drawImage(img, 50, 50, 30, 30)
}
img.src = '../public/delete.png';

在这里插入图片描述

9.动画

使用requestAnimationFrame()或setInterval()写一个圆扩散的动画

let i = 1;
function draw() {
  var canvas = document.getElementById('myCanvas');
  if (!canvas.getContext) return;
  var ctx = canvas.getContext('2d');

  //改变圆的透明度
  ctx.clearRect(0, 0, 500, 500)
  ctx.beginPath();
  ctx.arc(100, 100, 50 + i * -30, 0, Math.PI * 2, false);
  ctx.lineWidth = 4;
  ctx.fillStyle = "rgb(139,255,255," + i + ")";
  ctx.fill();

  ctx.beginPath();
  ctx.arc(100, 100, 30 + i * -30, 0, Math.PI * 2, false);
  ctx.lineWidth = 4;
  ctx.fillStyle = "rgb(139,193,255," + i + ")";
  ctx.fill();
  i < 0 ? i = 1 : i -= 0.01;
  requestAnimationFrame(draw)
}
draw()

//或者
// setInterval(() => {
//   i < 0 ? i = 1 : i -= 0.1;
//   draw()
// }, 200)

在这里插入图片描述

10.状态 save、restore

save()：保存canvas的状态。save之后可以调用Canvas的平移、放缩、旋转、错切、裁剪等操作。
restore()：恢复Canvas之前保存的状态。防止save后对Canvas执行的操作对后续的绘制有影响。

ctx.fillRect(10, 10, 100, 100);

ctx.save() //保存上边的矩形状态
ctx.translate(120, 120) //保存后平移画布中心点，原点平移到(120,120)的位置
ctx.fillRect(0, 0, 100, 100);
ctx.restore() //恢复之前的保存状态

ctx.save() //保存上边的矩形状态
ctx.translate(300, 220) // 保存后平移画布原点，原点平移到(300,220)的位置
ctx.rotate(45 * Math.PI / 180) //旋转45度
ctx.fillRect(0, 0, 100, 100);
ctx.restore() //恢复之前的保存状态

在这里插入图片描述

参考：
学习HTML5 Canvas这一篇文章就够了
理解Canvas的save()和restore()方法

标签：10,canvas,基础,ctx,50,使用,100,绘制
From： https://blog.csdn.net/qq_37822457/article/details/139413793

相关文章

  • 小D助手最新使用说明
    1、工具介绍1.1、应用场景重复性鼠标键盘操作少儿编程1.2、界面介绍1.3、脚本操作介绍新增脚本后，选择脚本后，鼠标右键出来一个菜单，有如下几种操作2、脚本操作2.1、选择区域2.1.1、简介选择区域操作是全局的，一般在脚本最上面使用，选择区域后，该脚本的所有鼠标操作都是......
  • 使用 G-Suite 传统账户指南
    我有一个个人域名，主要是为了获得电子邮件地址而购买的。该域名的所有电子邮件都被转发到我使用多年的谷歌账户。托管我域名的公司被另一家公司收购，新公司不再支持免费电子邮件。我有一个从未真正使用过的G-Suite传统帐户。我使用我的个人域名创建了该账户；但是，......
  • vue2.0和vue3.0同时使用
    背景：原先电脑上安装了vue2.0和node14.17.6版本，后面新项目使用的是vue3.0和node 16.6.1。通过nvm安装node 16.6.1的时候，不小心把原来的2.0环境给搞坏了。目的：本文将通过文字描述(都是cmd命令，截图感觉没啥意义)的方式，讲述卸载和安装多版本node的vue环境前言：步骤中所有的命令都......
  • dumpbin工具的使用
    dumpbin工具的使用 当我们需要查看一个dll或exe文件中的包含的函数或是依赖的函数之类的信息，可以使用VisualStudio自带的工具dumpbin来实现，使用方法为:1/启动VisualStudio命令行工具；2/查看导出函数，执行dumpbin/exports（dll或者exe文件路径）3/查看依赖性，执......
  • JavaFX 常见布局组件的使用
    Laytout简介JavaFX提供了多种布局管理器（LayoutManagers），它们用于自动管理用户界面组件的位置和大小。布局管理器可以简化UI设计，因为它们会根据窗口的大小变化自动调整其中的组件。布局组件JavaFX包含以下布局组件：布局名称中文说明AnchorPane锚点布局允许开发......
  • Python编程学习第一篇——Python零基础快速入门（五）-列表（List）
    今天我们来一起学习Python的列表（list），Python中的列表（List）是一种有序、可变的数据结构，可以用来存储多个值。列表可以包含不同类型的数据，例如整数、浮点数、字符串等。以下是关于Python列表定义、语法和基本操作的详细示例：1.定义列表：   可以使用方括号[]来定义一个列表。......
  • 《计算机网络微课堂》实验23 VLAN间通信的实现方法：使用三层交换机
    本仿真实验的目的在于验证VLAN间的通信可以使用三层交换机来实现。我已经在仿真软件中构建好了我们理论课中所使用的网络拓扑，并在各主机的旁边都标注好了所需配置的IP地址和地址掩码。​​‍博主注：在视频里使用到了三层交换机，但不知道是哪一种型号的，看到类似的有356024PS......
  • MySql 使用 NOT IN 返回值包含null值，返回数据不全
      mysqlnotin()找不到nullstatusnin('100','200','300','500')换成statusin('400')isnottrue      来源：https://blog.csdn.net/qq_35387940/article/details/127959272?spm=1001.2101.3001.6650.17&......
  • 使用ollama部署本地大模型
    安装docker与docker-compose安装ollama与anythingllmdocker-compose.ymlversion:"3"services:ollama:image:ollama/ollamacontainer_name:ollamavolumes:-.ollama:/root/.ollamaports:-11434:11434anythingllm:i......
  • Django + Vue 使用Nginx + uWsgi部署
    1.settings.py配置STATIC_ROOT=os.path.join(BASE_DIR,'static/dist')#导入前后端静态资源后更改即可DEBUG=True#为True不容易暴露项目信息，当然也不显示BUG信息ALLOWED_HOSTS=['*']STATIC_URL='/static/' 2.django端打包静态资源#会在static下生成[root@dsc1m......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99