当前位置: 首页 > news >正文

【HTML5】 canvas 绘制图形

文章目录

    • 一、基本用法
    • 二、用法详见
      • 2.0、方法属性
      • 2.1、绘制线条
      • 2.2、绘制矩形
      • 2.3、绘制圆形
      • 2.4、绘制文本
      • 2.5、填充图像

一、基本用法

  • canvas 标签:可用于在网页上绘制图形(使用 JavaScript 在网页上绘制图像)
  • 画布是一个矩形区域,通过控制其每一像素绘制路径、矩形、圆形、字符以及添加图像。
  • 创建一个canvas:width 和 height 是必备属性,id 是为了在 js 中获取改元素。
<canvas id="myCanvas" width="200" height="100"></canvas>
  • 在 js 中绘制 canvas
<script type="text/javascript">
// 通过 id 查找到 canvas 元素
var c = document.getElementById("myCanvas");
// 创建 context 对象
var cxt = c.getContext("2d");
// 绘制矩形(前2个参数为在canvas里面的矩形左上角起点坐标,第3个参数是宽,第4个参数是高)
cxt.fillRect(0,0,150,75);
// 填充颜色
cxt.fillStyle="#FF0000";
</script>

二、用法详见

2.0、方法属性

  • context 对象属性
属性描述
fillStyle设置或返回用于填充绘图的颜色、渐变或图案。
strokeStyle设置或返回用于笔划的颜色、渐变或图案。
shadowColor设置或返回用于阴影的颜色。
shadowBlur设置或返回阴影的模糊级别。
shadowOffsetX设置或返回阴影到形状的水平距离。
shadowOffsetY设置或返回阴影到形状的垂直距离。
  • context 对象方法
方法描述
fill()填充当前图形(路径)。
stroke()实际上绘制您定义的路径。
beginPath()开始路径,或重置当前路径。
closePath()创建从当前点返回起点的路径。

2.1、绘制线条

  • 线条方法
方法描述绘制
moveTo()划线起始点
lineTo()画线到另一个点
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
// 通过 id 查找到 canvas 元素
var c = document.getElementById("myCanvas");
// 创建 context 对象
var cxt = c.getContext("2d");
// 线条起点坐标
cxt.moveTo(10,10);
// 折点坐标
cxt.lineTo(150,50);
// 折点坐标
cxt.lineTo(10,50);
// 绘制当前或已经存在的路径的方法
cxt.stroke();
</script>

在这里插入图片描述

  • 专有属性
属性描述
lineWidth绘制时要使用的线条宽度像素
lineCap定义线的端部样式round(圆形) square(方形)、butt(平直,默认值)
lineJoin设置或返回两条线相交时创建的角的类型bevel(斜角)、round(圆角) miter(尖角,默认值)
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.strokeStyle = "red";
ctx.lineCap = "round";
ctx.stroke();

2.2、绘制矩形

  • fillRect() 方法:向路径添加一个填充的矩形 context.fillRect(x, y, width, height)
  • strokeRect() 方法:向路径添加一个无填充矩形 context.fillRect(x, y, width, height)
  • rect() 方法:向路径添加一个矩形 context.rect(x, y, width, height)
1. strokeRect(30, 30, 50, 50) 
等价于:ctx.rect(30, 30, 50, 50);ctx.stroke();
2. fillRect(30, 30, 50, 50) 
等价于:ctx.rect(30, 30, 50, 50);ctx.fill();
参数描述
x矩形左上角的 x 坐标。
y矩形左上角的 y 坐标。
width矩形的宽度,以像素为单位。
height矩形的高度,以像素为单位。
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");// 红色矩形
ctx.beginPath();
ctx.lineWidth = "6";
ctx.strokeStyle = "red";
ctx.fillStyle = "yellow"	// 在 strokeRect 中不生效
ctx.strokeRect(5, 5, 290, 140);// 绿色矩形
ctx.beginPath();
ctx.lineWidth = "4";		// 在 fillRect 中不生效
ctx.strokeStyle = "green";	// 在 fillRect 中不生效
ctx.fillStyle = "yellow"
ctx.fillRect(30, 30, 50, 50);

在这里插入图片描述

2.3、绘制圆形

  • arc() 方法:向路径添加一个圆形 context.arc(x,y,r,start,end)
参数描述
x圆心的x轴坐标
y圆心的y轴坐标
r圆弧的半径
start圆弧的起始点
end圆弧的终点
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
// 通过 id 查找到 canvas 元素
var c = document.getElementById("myCanvas");
// 创建 context 对象
var cxt = c.getContext("2d");
// 填充颜色
cxt.fillStyle="#FF0000";
// 创建一个新的路径
cxt.beginPath();
// 绘制圆弧路径的方法(圆心的x轴坐标,圆心的y轴坐标,圆弧的半径,圆弧的起始点,圆弧的终点,true逆时针绘制圆弧false顺时针绘制)
cxt.arc(70,18,15,0,Math.PI*2,true);
// 返回到当前路径起始点的方法
cxt.closePath();
// 填充当前或已存在的路径的方法
cxt.fill();
</script>

在这里插入图片描述

2.4、绘制文本

  • fillText(text,x,y):在画布上绘制“填充的”文本
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

在这里插入图片描述

  • strokeText(text,x,y):在画布上绘制文本(无填充)
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);

在这里插入图片描述

  • 专有属性:
属性描述
font设置或返回文本内容的当前字体属性。
textAlign设置或返回文本内容的当前对齐方式。
textBaseline设置或返回绘制文本时使用的当前文本基线。
  • font 属性:使用的语法与 CSS font 属性相同。

  • textAlign 属性
    在这里插入图片描述

描述
start默认。文本在指定的位置开始。
end文本在指定的位置结束。
center文本的中心被放置在指定的位置。
left文本左对齐。
right文本右对齐。
  • textBaseline 属性
    在这里插入图片描述
描述
alphabetic默认。文本基线是普通的字母基线。
top文本基线是 em 方框的顶端。
hanging文本基线是悬挂基线。
middle文本基线是 em 方框的正中。
ideographic文本基线是表意基线。
bottom文本基线是 em 方框的底端。

2.5、填充图像

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
// 通过 id 查找到 canvas 元素
var c = document.getElementById("myCanvas");
// 创建 context 对象
var cxt = c.getContext("2d");
var img = document.getElementById("scream");
// 放置图片 (图片,image的左上角在目标画布上X轴坐标,image的左上角在目标画布上Y轴坐标)
ctx.drawImage(img, 10, 10)
</script>

相关文章:

【HTML5】 canvas 绘制图形

文章目录 一、基本用法二、用法详见2.0、方法属性2.1、绘制线条2.2、绘制矩形2.3、绘制圆形2.4、绘制文本2.5、填充图像 一、基本用法 canvas 标签&#xff1a;可用于在网页上绘制图形&#xff08;使用 JavaScript 在网页上绘制图像&#xff09;画布是一个矩形区域&#xff0c…...

【数据结构】二叉树-堆(top-k问题,堆排序,时间复杂度)

&#x1f308;个人主页&#xff1a;秦jh__https://blog.csdn.net/qinjh_?spm1010.2135.3001.5343&#x1f525; 系列专栏&#xff1a;《数据结构》https://blog.csdn.net/qinjh_/category_12536791.html?spm1001.2014.3001.5482 ​​ 目录 堆排序 第一种 ​编辑 第二种 …...

通过浏览器判断是否安装APP

场景 求在分享出来的h5页面中&#xff0c;有一个立即打开的按钮&#xff0c;如果本地安装了我们的app&#xff0c;那么点击就直接唤本地app&#xff0c;如果没有安装&#xff0c;则跳转到下载。 移动端 判断本地是否安装了app 首先我们可以确认的是&#xff0c;在浏览器中无…...

vivado Revision Control

2020.2 只需要git 管理 prj.xpr 和 prj.srcs/ https://china.xilinx.com/video/hardware/ip-revision-control.html Using Vivado Design Suite with Revision Control https://www.xilinx.com/video/hardware/vivado-design-suite-revision-control.html http://www.xi…...

【AI视野·今日Robot 机器人论文速览 第七十三期】Tue, 9 Jan 2024

AI视野今日CS.Robotics 机器人学论文速览 Tue, 9 Jan 2024 Totally 40 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Robotics Papers Digital Twin for Autonomous Surface Vessels for Safe Maritime Navigation Authors Daniel Menges, Andreas Von Brandis, A…...

java解析json复杂数据的第四种思路

文章目录 一、概述二、数据预览1. 接口json数据 三、代码实现1. 核心代码2. 字符串替换结果3. 运行结果 一、概述 接前两篇 java解析json复杂数据的两种思路 java解析json复杂数据的第三种思路 我们已经有了解析json数据的几种思路&#xff0c;下面介绍的方法是最少依赖情况下…...

【不用找素材】ECS 游戏Demo制作教程(1) 1.15

一、项目设置 版本&#xff1a;2022.2.0f1 &#xff08;版本太低的话会安装不了ECS插件&#xff09; 模板选择3D URP 进来后移除URP&#xff08;因为并不是真的需要&#xff0c;但也不是完全不需要&#xff09; Name: com.unity.entities.graphics Version: 1.0.0-exp.8 点击…...

Mysql的in与exits

Mysql的in与exits IN和EXISTS是MySQL中用于子查询的两种不同的条件操作符。它们在使用和实现上有一些区别。 IN 操作符&#xff1a; IN操作符用于判断一个值是否在一个集合内。它可以用于子查询中&#xff0c;检查主查询的某一列是否在子查询返回的结果集中。 SELECT colum…...

浅谈对Maven的理解

一、什么是Maven Maven——是Java社区事实标准的项目管理工具&#xff0c;能帮你从琐碎的手工劳动中解脱出来&#xff0c;帮你规范整个组织的构建系统。不仅如此&#xff0c;它还有依赖管理、自动生成项目站点等特性&#xff0c;已经有无数的开源项目使用它来构建项目并促进团队…...

【算法实验】实验2

实验2-1 二分搜索 【问题描述】给定一个包含 n 个元素有序的&#xff08;升序&#xff09;整型数组 nums 和一个目标值 target&#xff0c;要求实现搜索 nums 中的 target&#xff0c;如果目标值存在返回下标&#xff0c;否则返回 -1。题目保证nums中的所有元素都不重复。 【…...

杂记:使用 mac 和 windows 以及编辑器的总结

Chrome 扩展 Grammarly 语法检查 DM Integration Module idm 下载扩展 JSON Formatter json 格式化查看 uBlock Origin Ad block 油猴 任意网站都可以使用的脚本管理工具 Mac 快捷键整理 截图到剪贴板 shift command control 4 (不按 shift 存储为文件) 切换输入法…...

vue2使用qiankun微前端(跟着步骤走可实现)

需求&#xff1a;做一个vue2的微前端&#xff0c;以vue2为主应用&#xff0c;其他技术栈为子应用&#xff0c;比如vue3&#xff0c;本文章只是做vue2一套的微前端应用实现&#xff0c;之后解决的一些问题。vue3子应用可以看我另一篇vue3vitets实现qiankun微前端子应用-CSDN博客…...

1.C语言基础知识

这里写目录标题 1.第一个C语言程序2.注释3.标识符4.关键字5.数据类型6.变量7.常量8.运算符9.输入输出输入输出 1.第一个C语言程序 C语言的编程框架 #include <stdio.h> int main() {/* 我的第一个 C 程序 */printf("Hello, World! \n");return 0; }2.注释 单行…...

路由黑洞和黑洞路由的区别

路由黑洞&#xff1a; 路由黑洞是一种现象&#xff0c;一般是在网络边界做汇总回程路由的时候产生的一种不太愿意出现的现象&#xff0c;就是汇总的时候有时会有一些不在内网中存在的网段&#xff0c;但是又包含在汇总后的网段中&#xff0c;如果在这个汇总的边界设备上同时还配…...

Golang 如何基于现有的 context 创建新的 context?

目录 基于现有的 context 创建新的 context 现有创建方法的问题 Go 1.21 中的 context.WithoutCancel 函数 Go 版本低于 1.21 该怎么办&#xff1f; 在 Golang 中&#xff0c;context 包提供了创建和管理上下文的功能。当需要基于现有的 context.Context 创建新的 context …...

【学习笔记】[AGC063E] Child to Parent

提供一个多项式做法。 分别设 f u , i , g u , i f_{u,i},g_{u,i} fu,i​,gu,i​表示以 u u u为根时&#xff0c; a u i a_ui au​i和 a u ≥ i a_u\ge i au​≥i的方案数&#xff0c;合并子树 v v v时&#xff0c;转移如下&#xff1a; f u , i ∑ f u , i − k r g v . k…...

sar 运行出错

手机上使用sar 使用sar工具报错 / # sar -I SUM 1 1 Cannot find the data collector (sadc) exec: No such file or directory Inconsistent input data解决方法&#xff1a;需要将 sadc sadf sar 三个bin同时推到/usr/bin/目录下 / # sar -I SUM 1 2 Linux 5.15.104-ab558…...

UE5 C++的TCP服务器与客户端

客户端.h 需要在Build.cs中加入模块:"Networking","Sockets","Json","JsonUtilities" // Fill out your copyright notice in the Description page of Project Settings.#pragma once#include "CoreMinimal.h" #include…...

nginx+lua配置,一个域名配置https,docker集群使用

没安装kua的先安装lua 没有resty.http模块的&#xff0c;许配置 nginxlua配置&#xff0c;一个域名配置https&#xff0c;docker集群使用&#xff0c;一个域名配置https管理整个集群 lua做转发&#xff08;方向代理&#xff09; 1、ad_load.lua文件 ngx.header.content_typ…...

jQuery 正则表达式 验证表单

文章目录 简介&#xff1a;什么是正则表达式以及作用&#xff1a;●文本框内容的验证&#xff1a;代码演示示例&#xff1a; 简介&#xff1a; jQuery Form插件是一个优秀的Ajax表单插件&#xff0c;可以非常容易地、无侵入地升级HTML表单以支持Ajax。jQuery Form有两个核心方法…...

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

高等数学(下)题型笔记(八)空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

区块链技术概述

区块链技术是一种去中心化、分布式账本技术&#xff0c;通过密码学、共识机制和智能合约等核心组件&#xff0c;实现数据不可篡改、透明可追溯的系统。 一、核心技术 1. 去中心化 特点&#xff1a;数据存储在网络中的多个节点&#xff08;计算机&#xff09;&#xff0c;而非…...

【PX4飞控】mavros gps相关话题分析,经纬度海拔获取方法,卫星数锁定状态获取方法

使用 ROS1-Noetic 和 mavros v1.20.1&#xff0c; 携带经纬度海拔的话题主要有三个&#xff1a; /mavros/global_position/raw/fix/mavros/gpsstatus/gps1/raw/mavros/global_position/global 查看 mavros 源码&#xff0c;来分析他们的发布过程。发现前两个话题都对应了同一…...

GeoServer发布PostgreSQL图层后WFS查询无主键字段

在使用 GeoServer&#xff08;版本 2.22.2&#xff09; 发布 PostgreSQL&#xff08;PostGIS&#xff09;中的表为地图服务时&#xff0c;常常会遇到一个小问题&#xff1a; WFS 查询中&#xff0c;主键字段&#xff08;如 id&#xff09;莫名其妙地消失了&#xff01; 即使你在…...

精益数据分析(98/126):电商转化率优化与网站性能的底层逻辑

精益数据分析&#xff08;98/126&#xff09;&#xff1a;电商转化率优化与网站性能的底层逻辑 在电子商务领域&#xff0c;转化率与网站性能是决定商业成败的核心指标。今天&#xff0c;我们将深入解析不同类型电商平台的转化率基准&#xff0c;探讨页面加载速度对用户行为的…...

Qt Quick Controls模块功能及架构

Qt Quick Controls是Qt Quick的一个附加模块&#xff0c;提供了一套用于构建完整用户界面的UI控件。在Qt 6.0中&#xff0c;这个模块经历了重大重构和改进。 一、主要功能和特点 1. 架构重构 完全重写了底层架构&#xff0c;与Qt Quick更紧密集成 移除了对Qt Widgets的依赖&…...