html5 -- canvas使用(1)

news2024/11/27 5:32:50

canvas

设置canvas标签 添加宽高 默认单位为px

<!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>
      #canvas1 {
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <canvas width="300" height="150" id="canvas1"></canvas>
    <script>
      var canvas = document.getElementById('canvas1');
    </script>
  </body>
</html>

getContext()

设置上下文的类型

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

ctx可以看做是一个画笔

fillStyle

设置填充的样式

      ctx.fillStyle = 'orange';

fillRect

ctx.fillRect(x, y, width, height);
有四个参数 设置x,y方向坐标与宽高值

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

clearRect

清除中间的区域
四个参数 设置x,y方向坐标与宽高值

      ctx.clearRect(75, 75, 50, 50);

在这里插入图片描述

strokeRect

带轮廓的矩形
四个参数 设置x,y方向坐标与宽高值

      ctx.strokeStyle(50, 50, 100, 100);

strokeStyle

设置轮廓矩形的样式

      ctx.strokeStyle = 'orange';

<!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>
      #canvas1 {
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <canvas width="300" height="150" id="canvas1"></canvas>
    <script>
      var canvas = document.getElementById('canvas1');
      // 一个参数  设置上下文的类型
      var ctx = canvas.getContext('2d');
      ctx.strokeStyle = 'orange';
      ctx.strokeRect(50, 50, 100, 100);
    </script>
  </body>
</html>

在这里插入图片描述

创建移动路径

1.创建一个路径beginPath
2.使用画图命令画出路径
3.一旦路径被创建出来的化 就可以通过描边或填充路径区域来渲染图形

直线

beginPath

创建一个路径

ctx.beginPah()

moveTo

起始位置 参数是坐标

stx.moveTo(50, 50)

lineTo

表示直线到哪个位置 参数是坐标

ctx.lineTo(100, 100)

stroke

路径显示

ctx.stroke()

lineWidth

设置线宽

ctx.lineWidth = 10

在这里插入图片描述

closePath

闭合路径

绘制三角形

      var canvas = document.getElementById('canvas1');
      // 一个参数  设置上下文的类型
      var ctx = canvas.getContext('2d');
      ctx.beginPath();
      ctx.strokeStyle = 'orange';
      ctx.moveTo(50, 50);
      ctx.lineWidth = 10;
      ctx.lineTo(150, 50);
      ctx.lineTo(100, 100);
      ctx.closePath();
      ctx.stroke();

在这里插入图片描述

arc

画圆形
arc(x,y, startAngle, endAngle, anticlockwise)

      var canvas = document.getElementById('canvas1');
      // 一个参数  设置上下文的类型
      var ctx = canvas.getContext('2d');
      ctx.beginPath();
      ctx.arc(70, 70, 50, 0, 2 * Math.PI);
      ctx.stroke();

在这里插入图片描述
最后一个参数false为顺时针画 true为逆时针

      var canvas = document.getElementById('canvas1');
      // 一个参数  设置上下文的类型
      var ctx = canvas.getContext('2d');
      ctx.beginPath();
      ctx.arc(70, 70, 50, 0, (Math.PI / 180) * 90);
      ctx.stroke();

在这里插入图片描述

      var canvas = document.getElementById('canvas1');
      // 一个参数  设置上下文的类型
      var ctx = canvas.getContext('2d');
      ctx.beginPath();
      ctx.arc(70, 70, 50, 0, (Math.PI / 180) * 90, true);
      ctx.stroke();

在这里插入图片描述

arcTo

画圆弧路径
arcTo(x1, y1, x2, y2 ,radius)
前四个为控制点的坐标

      var canvas = document.getElementById('canvas1');
      // 一个参数  设置上下文的类型
      var ctx = canvas.getContext('2d');
      ctx.beginPath();
      ctx.moveTo(150, 20);
      ctx.arcTo(150, 100, 50, 20, 30);
      ctx.lineTo(50, 20);
      ctx.stroke();

      //基础点
      ctx.fillStyle = 'blue';
      ctx.fillRect(150, 20, 10, 10);
      ctx.fillStyle = 'red';
      //控制点k1
      ctx.fillRect(150, 100, 10, 10);
      //控制点k2
      ctx.fillRect(50, 20, 10, 10);

在这里插入图片描述
在这里插入图片描述

quadraticCurveTo

二次贝塞尔曲线
quadraticCurveTo(ctx, cty, x, y)
控制点与终点

      var canvas = document.getElementById('canvas1');
      // 一个参数  设置上下文的类型
      var ctx = canvas.getContext('2d');
      ctx.beginPath();
      ctx.moveTo(50, 20);
      ctx.quadraticCurveTo(230, 30, 50, 100);
      ctx.stroke();

      ctx.fillStyle = 'blue';
      // 起点
      ctx.fillRect(50, 20, 10, 10);
      // 终点
      ctx.fillRect(50, 100, 10, 10);
      // 控制点
      ctx.fillStyle = 'red';
      ctx.fillRect(230, 30, 10, 10);

在这里插入图片描述

bazierCurveTo

三次贝塞尔曲线
bazierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y)
两个控制点一个终点

      var canvas = document.getElementById('canvas1');
      // 一个参数  设置上下文的类型
      var ctx = canvas.getContext('2d');
      ctx.beginPath();
      ctx.moveTo(50, 20);
      ctx.quadraticCurveTo(230, 50, 150, 60, 50, 100);
      ctx.stroke();

在这里插入图片描述

translate

坐标轴变换

      var canvas = document.getElementById('canvas1');
      // 一个参数  设置上下文的类型
      var ctx = canvas.getContext('2d');
      ctx.translate(50, 50);
      ctx.fillRect(0, 0, 10, 10);

在这里插入图片描述

restore

恢复到最近一次保存的情况

      var canvas = document.getElementById('canvas1');
      // 一个参数  设置上下文的类型
      var ctx = canvas.getContext('2d');
      ctx.save(); //保存之前的状态
      ctx.translate(50, 50);
      ctx.fillRect(0, 0, 10, 10);
      ctx.restore(); //还原上次保存的状态
      ctx.fillStyle = 'orange';
      ctx.fillRect(0, 0, 10, 10);

在这里插入图片描述

scale

缩放因子
x轴整体缩放

      var canvas = document.getElementById('canvas1');
      // 一个参数  设置上下文的类型
      var ctx = canvas.getContext('2d');
      ctx.scale(2, 1);
      ctx.fillRect(50, 0, 50, 50);

在这里插入图片描述

totate

旋转

      var canvas = document.getElementById('canvas1');
      // 一个参数  设置上下文的类型
      var ctx = canvas.getContext('2d');
      ctx.fillRect(20, 20, 50, 50);
      ctx.rotate((Math.PI / 180) * 10);
      ctx.fillStyle = 'red';
      ctx.fillRect(20, 20, 50, 50);

在这里插入图片描述

transform

水平缩放 垂直倾斜 水平倾斜 垂直缩放 水平移动 垂直移动

      var canvas = document.getElementById('canvas1');
      // 一个参数  设置上下文的类型
      var ctx = canvas.getContext('2d');
      ctx.transform(1, 1, 0, 1, 0, 0);
      ctx.fillRect(0, 0, 50, 50);

在这里插入图片描述

setTransform

忽略transalte的变换

      var canvas = document.getElementById('canvas1');
      // 一个参数  设置上下文的类型
      var ctx = canvas.getContext('2d');
      ctx.translate(50, 50);
      ctx.setTransform(1, 1, 0, 1, 0, 0);
      ctx.fillRect(0, 0, 50, 50);

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/4073.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

荧光标记氨基酸：荧光标记DL-天门冬氨酸，荧光标记甘氨酸-DL-天冬氨酸，DL aspartic acid labeled

荧光标记氨基酸：荧光标记DL-天门冬氨酸，荧光标记甘氨酸-DL-天冬氨酸，DL aspartic acid labeled

产品名称&#xff1a;荧光标记甘氨酸-DL-天冬氨酸&#xff0c;DL aspartic acid labeled 甘氨酸-DL-天冬氨酸是一种化学物质&#xff0c;化学式是C6H10N2O5&#xff0c;分子量是208.17。 DL-天门冬氨酸(DL-Asp)在医药方面有着重要的用途,可用于合成DL-天门冬氨酸钾镁盐(脉安定…
阅读更多...
云原生之K8s—yaml文件

云原生之K8s—yaml文件

目录 一、K8S支持的文件格式 1、yaml和json的主要区别 二、YAML 2.1、查看API资源版本标签 2.2、编写资源配置清单 编写nginx-test.yaml资源配置清单 创建资源对象 查看创建的pod资源 创建资源对象 网页访问一下 K8S中的port概述 创建yaml文件模板 查看生成yaml格式…
阅读更多...
【python的静态方法，classmethod方法和__call___魔法方法】

【python的静态方法，classmethod方法和__call___魔法方法】

classmethod魔法方法和staticmethodstaticmethod&#xff0c;静态方法classmethod&#xff0c;绑定类方法__call__&#xff0c;可调用类类方法staticmethod&#xff0c;静态方法 在python中&#xff0c;使用静态方法可以实现不需要实例化对象的绑定就可以直接调用的函数&#…
阅读更多...
Linux系统编程·进程概念

Linux系统编程·进程概念

你好&#xff0c;我是安然无虞。 文章目录自学网站上文回顾进程控制块—PCB查看进程初识系统调用初始fork函数练习题自学网站 推荐给老铁们两款学习网站&#xff1a; 面试利器&算法学习&#xff1a;牛客网 风趣幽默的学人工智能&#xff1a;人工智能学习 首个付费专栏&…
阅读更多...
添加滚动彩色提醒通知公告代码

添加滚动彩色提醒通知公告代码

分享一个动态的滚动多样化的彩色提醒通知公告&#xff0c;代码是自适应的&#xff0c;放在很多地方都可以用&#xff0c;在wordpress、emlog等建站cms中&#xff0c;都可以在自定义侧边栏中&#xff0c;用来网站、博客的美化也是非常不错的选择。 使用说明: wordpress&#xff…
阅读更多...
网络编程04-UDP的广播、组播

网络编程04-UDP的广播、组播

目录 一、UDP广播通信 1、什么是广播 2、特点 3、广播地址 4、实现广播的过程&#xff08;一定是使用UDP协议&#xff09; 广播发送端 广播接收方 练习1&#xff1a; 把广播通信进行实现 发送端 接收端 二、UDP组播&#xff08;群聊&#xff09; 1、概念 2、组播特…
阅读更多...
(最新版2022版）剑指offer之动态规划题解

(最新版2022版）剑指offer之动态规划题解

&#xff08;最新版2022版&#xff09;剑指offer之动态规划题解[剑指 Offer 42. 连续子数组的最大和][剑指 Offer 47. 礼物的最大价值][剑指 Offer 46. 把数字翻译成字符串][剑指 Offer 48. 最长不含重复字符的子字符][剑指 Offer 48. 矩形覆盖][剑指 Offer 买卖股票的最好时机…
阅读更多...
小侃设计模式（五）-建造者模式与模板方法模式

小侃设计模式（五）-建造者模式与模板方法模式

1.概述 建造者模式&#xff08;Builder Pattern&#xff09;又叫生成器模式&#xff0c;是一种对象构建模式&#xff0c;它可以将复杂对象的建造过程抽象出来&#xff08;抽象类别&#xff09;&#xff0c;这个抽象过程的不同实现方法可以构造出不同表现&#xff08;属性&…
阅读更多...
家庭主妇问题

家庭主妇问题

一 问题描述 X 村的人们住在美丽的小屋里。若两个小屋通过双向道路连接&#xff0c;则可以说这两个小屋直接相连。X 村非常特别&#xff0c;可以从任意小屋到达任意其他小屋&#xff0c;每两个小屋之间的路线都是唯一的。温迪的孩子喜欢去找其他孩子玩&#xff0c;然后打电话给…
阅读更多...
C++中TCP socket传输文件

C++中TCP socket传输文件

在两个文件中都定义文件头和用到的宏&#xff1a; #define MAX_SIZE 10 #define ONE_PAGE 4096 struct FileHead {char str[260];int size; }; 在客户端发送接收阶段&#xff1a; //1.发送文件头char path[260] {0};cout<<"请输入文件路径"<<endl;cin…
阅读更多...
数字图像处理MATLAB

数字图像处理MATLAB

数字图像处理MATLAB 基&#xff08;本&#xff09;操&#xff08;作&#xff09; 图片读取 Aimread(test.bmp); imshow(A);2. 图像写入 Aimread(test.bmp); imwrite(A,test-bak.bmp); Bimread(test-bak.bmp); imshow(B);3. 图像文件信息查询 infoimfinfo(test.bmp);4. 显示…
阅读更多...
【创建型】生成器模式(Builder)

【创建型】生成器模式(Builder)

目录生成器模式(Builder)适用场景生成器模式实例代码&#xff08;Java&#xff09;生成器模式(Builder) 将一个复杂对象的构建与它的表示分离&#xff0c;使得同样的构建过程可以创建不同的表示。 适用场景 当创建复杂对象的算法应该独立于该对象的组成部分以及它们的装配方…
阅读更多...
【SpringBoot笔记22】SpringBoot框架集成Redis数据库

【SpringBoot笔记22】SpringBoot框架集成Redis数据库

这篇文章&#xff0c;主要介绍SpringBoot框架如何集成Redis数据库。 目录 一、SpringBoot集成Redis 1.1、引入依赖 1.2、配置redis连接信息 1.3、添加RedisTemplate配置类 1.4、编写测试类 1.5、运行测试 一、SpringBoot集成Redis Redis是一个非关系型数据库&#xff0c…
阅读更多...
PCIe ECAM机制访问PCIE的配置空间

PCIe ECAM机制访问PCIE的配置空间

1.PCIe ECAM机制 PCI Express Enhanced Configuration Access Mechanism (ECAM)是访问PCIe配置空间的一种机制。是将PCIe的配置空间映射到MEM空间&#xff0c;使用MEM访问其配置空间的一种实现。可参考NCB-PCI_Express_Base_5.0r1.0-2019-05-22.pdf的第7.2.2小节。 其地址映射…
阅读更多...
上海亚商投顾：沪指录得6连阳 两市成交再度破万亿

上海亚商投顾：沪指录得6连阳 两市成交再度破万亿

上海亚商投顾前言&#xff1a;无惧大盘大跌&#xff0c;解密龙虎榜资金&#xff0c;跟踪一线游资和机构资金动向&#xff0c;识别短期热点和强势个股。 市场情绪 三大指数今日横盘震荡&#xff0c;收盘集体小幅上扬&#xff0c;日K线均录得6连阳。虚拟现实概念股集体拉升&#…
阅读更多...
【SA-Token】授权 鉴权中心微服务

【SA-Token】授权 鉴权中心微服务

授权 鉴权中心微服务 1 什么是JWT 1.2 JWT 的基本概念 1.3 JSON Web Token jwt 是一个开放标准 它定义了一种紧凑的、自包含的方式 用于作为JSON 对象在各方之间安全地传输信息 1.4.那些场景下可以考虑使用JWT &#xff1f; ​ 1.用户授权 信息交换 1.5 JWT的结构及其含义 …
阅读更多...
镜频抑制滤波器对射频接收前端输出噪声的影响

镜频抑制滤波器对射频接收前端输出噪声的影响

射频接收前端包括LNA、Filter、Mixer等部件&#xff0c;从噪声因子级联的角度讲&#xff0c;希望接收链路第一级为高增益、低噪声系数放大器&#xff0c;以期望得到较低的系统噪声系数&#xff0c;提高接收灵敏度。除LNA外&#xff0c;接收链路还有一个关键的部件——镜频抑制滤…
阅读更多...
精读大型网站架构：前端架构模块化的方法及困境，自研框架Trick

精读大型网站架构：前端架构模块化的方法及困境，自研框架Trick

模块化的方法 网页和网页之间有很多相似或者相同的模块&#xff0c;模块化就是把这些模块抽离并独立管理。而模块化的方法&#xff0c;就是把模块的HTML、CSS和JavaScript文件独立出来&#xff0c;然后通过某种方法关联到使用这些模块的网页上。 在介绍模块化的具体方法之前&…
阅读更多...
consul--基础--05--api

consul--基础--05--api

consul–基础–05–api 1、介绍 主要接口是RESTful HTTP API&#xff0c;该API可以用来增删查改nodes、services、checks、configguration。所有的endpoints主要分为以下类别 kv&#xff1a;Key/Value存储agent&#xff1a;Agent控制catalog&#xff1a;管理nodes和serviceshe…
阅读更多...
数据结构-例题实训作业-二叉树相关

数据结构-例题实训作业-二叉树相关

第1关：以先序的方式建立二叉树 任务描述 本关任务：以先序的方式建立二叉树并显示（顺时针90度后看） 相关知识 为了完成本关任务，你需要掌握： 1.二叉树的概念 2.二叉树的先序遍历方式 3.二叉树的遍历。 编程要求 在以下空白处补写代码，以先序方式完成二叉树的建立。 //…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023