【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>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MATLAB R2023b for Mac 中文

MATLAB R2023b 是 MathWorks 发布的最新版本的 MATLAB&#xff0c;适用于进行算法开发、数据可视化、数据分析以及数值计算等任务的工程师和科学家。它包含了一系列新增功能和改进&#xff0c;如改进了数据导入工具&#xff0c;增加了对数据帧和表格对象的支持&#xff0c;增强…

手机上最危险的3个操作,千万小心!

普通人千万不要在手机上做这3个操作&#xff0c;否则你的手机早晚会被黑客入侵了。 第一种&#xff0c;苹果越狱 越狱虽然可以绕过限制给你的苹果安装上一些特殊软件&#xff0c;但只要是越狱之后的苹果手机&#xff0c;都将留下漏洞&#xff0c;黑客最喜欢寻找做过越狱的手机…

nginx离线安装

安装包准备&#xff1a; 上传安装包到linux系统 一、进入gcc目录&#xff0c;执行以下命令 rpm -Uvh *.rpm --nodeps --force gcc -v查看版本 二、 进入gcc-c目录&#xff0c;执行命令 rpm -Uvh *.rpm --nodeps --force g -v查看版本 三、安装PCRE 解压&#xff1a; t…

众和策略:券商又念“紧箍咒” 绕标套现的头疼了

又有券商对两融事务念“紧箍咒”。 近来&#xff0c;记者从广发证券获悉&#xff0c;该公司已发布《关于调整融资融券负债归还规矩的告诉》&#xff0c;自2024年1月15日起&#xff0c;决议禁止融资买入证券用于归还融券负债。 相关业内人士以为&#xff0c;自上一年10月融资融…

华为交换机配置NQA DNS检测IP网络DNS解析速度

华为HCIA视频教程&#xff1a;超级实用&#xff0c;华为VRP系统文件详解 华为HCIA视频教程&#xff1a;不会传输层协议&#xff0c;HCIA都考不过 华为HCIA视频教程&#xff1a;网络工程师的基本功&#xff1a;网络地址转换NAT 华为HCIP视频教程&#xff1a;DHCP协议原理与配…

安防视频云平台/可视化监控云平台ARM版EasyCVR无法下载录像文件,如何解决?

视频集中存储/云存储/视频监控管理平台EasyCVR能在复杂的网络环境中&#xff0c;将分散的各类视频资源进行统一汇聚、整合、集中管理&#xff0c;实现视频资源的鉴权管理、按需调阅、全网分发、智能分析等。GB28181视频监控/AI智能大数据视频分析EasyCVR平台已经广泛应用在工地…

如何使用Docker本地搭建Traefik服务并实现公网访问管理界面

文章目录 前言1. Docker 部署 Trfɪk2. 本地访问traefik测试3. Linux 安装cpolar4. 配置Traefik公网访问地址5. 公网远程访问Traefik6. 固定Traefik公网地址 前言 Trfɪk 是一个云原生的新型的 HTTP 反向代理、负载均衡软件&#xff0c;能轻易的部署微服务。它支持多种后端 (D…

感知器学习算法和Adaline规则

一.感知器的发展过程 感知器的发展可以追溯到20世纪50年代。它是一种简单的人工神经网络模型&#xff0c;最早由美国心理学家和计算机科学家弗兰克罗森布拉特&#xff08;Frank Rosenblatt&#xff09;于1957年提出。感知器的设计灵感来源于生物神经元的工作原理&#xff0c;旨…

7.3 数据库的基本查询

数据库的基本查询 1. 提要2. 简单查询3. 高级查询3.1 数据分页_limit3.2 排序_order by3.3 查询去重_distinct 4. 条件查询 1. 提要 2. 简单查询 3. 高级查询 3.1 数据分页_limit 3.2 排序_order by 3.3 查询去重_distinct 4. 条件查询

街机模拟游戏逆向工程(HACKROM)教程:[3]街机的ROM与RAM

简介 在街机模拟器中运行一个街机游戏&#xff0c;我们除了需要一个模拟器工具 &#xff0c;也需要有一个街机的ROM文件。街机的ROM文件&#xff0c;称之为Read-Only Memory&#xff0c;可以理解为只读存储器。在 ROM文件中&#xff0c;包括了游戏运行所需要的指令代码&#x…

Fiddler工具 — 15.Filters(过滤器)界面

1、Filters介绍 Filters&#xff1a;过滤器&#xff0c;帮助我们过滤请求。 如果需要过滤掉与测试项目无关的抓包请求&#xff0c;更加精准的展现抓到的请求&#xff0c;而不是杂乱的一堆&#xff0c;那功能强大的 Filters 过滤器能帮到你。 总结&#xff1a;Filters过滤器的…

gitlab 命令执行漏洞(CVE-2022-2992)

1.漏洞影响版本 GitLab CE/EE 中的一个漏洞影响从 11.10 开始到 15.1.6 之前的所有版本、从 15.2 开始到 15.2.4 之前的所有版本、从 15.3 开始到 15.3.2 之前的所有版本。允许经过身份验证的用户通过从 GitHub API 端点导入实现远程代码执行。 查看 gitlab 版本。(登录后才能…

全国博物馆数据, shp+excel数据,数据来源可靠,基于国家文物局发布的《2021年度全国博物馆名录》

数据名称: 全国博物馆数据 数据格式: shpexcel 数据几何类型: 点 数据坐标系: WGS84 数据来源&#xff1a;网络公开数据&#xff0c;数据名录来源于国家文物局发布的《2021年度全国博物馆名录》 数据字段&#xff1a; 序号字段名称字段说明1province省份名称2city城市名…

不管你打开什么App,命运都会让我们相聚在购物软件

「不管打开什么 App &#xff0c;命运都会让我们相聚在购物平台。」 「现在谁还亲自打开淘宝和京东&#xff1f;随便打开一个 App 摇一摇&#xff0c;速度更快。」 最近&#xff0c;差评君在很多社交媒体平台都刷到了这样的段子。 如果你没get到啥意思&#xff0c;咱也不卖关…

一个完整的流程表单流转

1.写在前面 一个完整的流程表单审批&#xff08;起表单-->各环节审批-->回退-->重新审批-->完成&#xff09;&#xff0c;前端由Vue2jsElement UI升级为Vue3tsElement Plus&#xff0c;后端流程框架使用Flowable&#xff0c;项目参考了ruoyi-vue-pro(https://gite…

Java学习(十八)--网络编程

介绍 需求 如何准确地定位网络上一台或多台主机&#xff1b; 定位主机上的特定的应用 找到主机后如何可靠高效地进行数据传输 目的 直接或间接地通过网络协议与其它计算机实现数据交换&#xff0c;进行通讯&#xff1b; 网络通信 网络&#xff1a;两台或多台设备通过一…

怎样利用MATLAB制作图中图(局部放大图片)

先做一个声明&#xff1a;文章是由我的个人公众号中的推送直接复制粘贴而来&#xff0c;因此对智能优化算法感兴趣的朋友&#xff0c;可关注我的个人公众号&#xff1a;启发式算法讨论。我会不定期在公众号里分享不同的智能优化算法&#xff0c;经典的&#xff0c;或者是近几年…

Quick taxi route assignment via real-time intersection state prediction

Quick taxi route assignment via real-time intersection state prediction with a spatial-temporal graph neural network(通过时空图神经网络实时交叉口状态预测快速分配出租车路线) PAPER LINK 简单说一下: 本文采用了一种新的方法,通过使用空间-时间图神经网络(ST…

基于位的权限系统

基于位的权限系统是一种利用二进制位运算进行权限管理的技术。在这种系统中&#xff0c;不同的权限被编码为2的幂次方 (例如1、2、4、8等)&#xff0c;每个权限对应一个独立的二进制位&#xff08;可想而知运算速度是非常快的&#xff09;。通过将这些权限值组合在一起形成一个…

力扣198. 打家劫舍(java 动态规划)

Problem: 198. 打家劫舍 文章目录 题目描述思路解题方法复杂度Code 题目描述 思路 1.构建多阶段决策模型&#xff1a;n个房屋对应n个阶段&#xff0c;每一个阶段决定一个房间是偷还是不偷&#xff0c;两种决策&#xff1a;偷、不偷 2.定义状态&#xff1a;不能记录每个阶段决策…