7.15、HTML5画布（矩形和圆形）
2024-04-12 11:23:37
1、使用画布画矩形
绘制矩形的方法里面有四个参数 （x坐标,y坐标,矩形宽,矩形高）
1.创建一个矩形（默认）
<!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>
</head><body><canvas id="canvas" width="500" height="500">你的浏览器不支持画布</canvas>
</body>
<script type="text/javascript">//1.获取一个画布（要创建一个画布对象）var canvas = document.getElementById("canvas");//2.创建一个画布上下文对象var context = canvas.getContext("2d");context.rect(0, 0, 200, 200)context.stroke();
</script></html>效果图：
2.创建一个被填充的矩形
<!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>
</head><body><canvas id="canvas" width="500" height="500">你的浏览器不支持画布</canvas>
</body>
<script type="text/javascript">//1.获取一个画布（要创建一个画布对象）var canvas = document.getElementById("canvas");//2.创建一个画布上下文对象var context = canvas.getContext("2d");//调用一个画矩形的函数fillRect(x,y,width,height)context.fillStyle = "red";context.fillRect(0, 0, 100, 100)
</script></html>效果图：
3.绘制只有边的（没有被填充）的矩形
<!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>
</head><body><canvas id="canvas" width="500" height="500">你的浏览器不支持画布</canvas>
</body>
<script type="text/javascript">//1.获取一个画布（要创建一个画布对象）var canvas = document.getElementById("canvas");//2.创建一个画布上下文对象var context = canvas.getContext("2d");//只有边context.strokeStyle = "red"context.strokeRect(0, 0, 200, 100)
</script></html>效果图：
4.擦拭出多大的矩形（一般配合填充矩形使用）
<!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>
</head><body><canvas id="canvas" width="500" height="500">你的浏览器不支持画布</canvas>
</body>
<script type="text/javascript">//1.获取一个画布（要创建一个画布对象）var canvas = document.getElementById("canvas");//2.创建一个画布上下文对象var context = canvas.getContext("2d");//调用一个画矩形的函数fillRect(x,y,width,height)context.fillStyle = "red";context.fillRect(0, 0, 100, 100)//擦拭出多大的矩形context.clearRect(10, 10, 10, 10)
</script></html>效果图：
2、画圆
1.画圆使用arc()首先我们画一个正圆
<!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>
</head><body><canvas id="canvas" width="2000" height="2200"></canvas>
</body>
<script>//1.获取一个画布（创建一个画布对象）var canvas = document.getElementById("canvas");//2.创建一个画布上下文var context = canvas.getContext("2d");//画圆// 正圆context.arc(100, 100, 50, 0, Math.PI * 2, )context.stroke();
</script></html>效果图：
2.这里面的 （Math.PI * 2）就表示正圆如果（ Math.PI * 1）就是半圆，如下：（当然这里面context.lineWidth = 数值;也是生效的）
<!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>
</head><body><canvas id="canvas" width="2000" height="2200"></canvas>
</body>
<script>//1.获取一个画布（创建一个画布对象）var canvas = document.getElementById("canvas");//2.创建一个画布上下文var context = canvas.getContext("2d");//画圆//半圆context.beginPath()context.arc(100, 100, 60, 0, Math.PI * 1, );context.lineWidth = 15;context.stroke();
</script></html>效果图：
3.半圆也可以旋转逆时针就是true顺时针就是false
为true时：
<!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>
</head><body><canvas id="canvas" width="2000" height="2200"></canvas>
</body>
<script>//1.获取一个画布（创建一个画布对象）var canvas = document.getElementById("canvas");//2.创建一个画布上下文var context = canvas.getContext("2d");//画圆//半圆context.beginPath()context.arc(100, 100, 60, 0, Math.PI * 1, true);// context.lineWidth = 15;context.stroke();
</script></html>效果图：
为false时（把上面代码true改为false）效果：
3、画椭圆
其实椭圆和圆差不多
代码：
<!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>
</head><body><canvas id="canvas" width="2000" height="2200"></canvas>
</body>
<script>//1.获取一个画布（创建一个画布对象）var canvas = document.getElementById("canvas");//2.创建一个画布上下文var context = canvas.getContext("2d");context.ellipse(120, 100, 100, 50, 0, 0, 2 * Math.PI)context.stroke();
</script></html>效果图：
7.15、HTML5画布（矩形和圆形）相关推荐
- HTML5画布（canvas）绘制三角形，矩形，圆形
canvas标签: <canvas id="cavsElem" width="400" height="300">您的浏览器不支 ...
- html根据矩形确定四值坐标,熬夜总结了 “HTML5画布” 的知识点（共10条）
前言 html5Canvas的知识点,是开发的必备技能,在实际工作中也常常会涉及到. 最近熬夜总结html5Canvas相关的知识点,大家一起看一下吧: 1.html5Canvas基础知识Canvas ...
- html5 渐变色矩形,使用HTML5画布元素的矩形渐变
如何使用HTML5画布元素绘制具有如下图所示渐变效果的矩形?使用HTML5画布元素的矩形渐变 编辑:感谢所有的反馈.是的,我已经尝试了很多方法.例如,我可以使用@Loktar建议的createRadi ...
- html页面矩形,HTML5画布（矩形）
canvas元素用于绘制图形. canvas元素是HTML5中新增的一个重要元素,元素本身是没有绘图能力,所有的绘制工作必须在javascript内部完成. 案例1: function draw(){ ...
- html5 fish bow,带有HTML5画布元素的矩形渐变
如何使用 HTML5画布元素绘制具有如下图所示的渐变效果的矩形? 编辑:感谢您的所有反馈.是的,我已经尝试了很多方法.例如,我可以使用@Loktar建议的createRadialGradient方法吗 ...
- 表盘时针的html代码,html5画布操作的简单学习-简单时钟
html5画布操作的简单学习-简单时针 效果图 一.什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. ...
- 熬夜总结了 “HTML5画布” 的知识点（共10条）
前言 html5Canvas的知识点,是程序员开发者必备技能,在实际工作中也常常会涉及到. 最近熬夜总结html5Canvas相关的知识点,大家一起看一下吧: 1.html5Canvas基础知识 Ca ...
- 熬夜总结了 “HTML5画布” 的知识点（万字长文，建议收藏）
感谢哪吒的投稿 前言 html5Canvas的知识点,是开发的必备技能,在实际工作中也常常会涉及到. 最近熬夜总结html5Canvas相关的知识点,大家一起看一下吧: 1.html5Canvas基础 ...
- 使用Konva操纵HTML5画布：第2部分，基本形状
该系列的入门教程教您如何使用Konva绘制第一个形状. 它还说明了层和组在Konva中如何工作. 在本系列的其余部分中,我们将专注于更具体的主题,例如创建基本和复杂的形状或将事件侦听器附加到不同的形状 ...
- 用html5写一段文字画布中,超全的HTML5画布（Canvas)实例
1.环行进端处触码通法果泉位可近境其行框理发HTML5专门为画布功能提供的标签:,所以画布相关的功能都是基于这个标签来完览页些求时是过解些这确如目前例总站回广随能4果泉时标配使能幻近器面实的我是接,前 ...
最新文章
- 老版本select2设置初始值
- [转]SQLServer和Oracle，存储过程区别，常用函数对比
- 保护8亿终端 阿里聚安全携手信通院打造B2C资金安全闭环
- fgets和scanf的区别
- 一些常见去除恶意软件的东东
- BZOJ 1221: [HNOI2001] 软件开发(最小费用最大流)
- 在openstack环境中安装rackspace private cloud --1 环境准备
- checkbox居中 editor_如何在ListBoxItem中居中WPF CheckBox
- PHP做闹钟APP,8款超好用的闹钟APP，专治各种赖床
- java 几个线程池的理解
- TensorFlow 2.0 - 自定义模型、训练过程
- Feature Engineering 特征工程 2. Categorical Encodings
- Vue系列vue-router的动态路由使用（二）
- #宝塔面板# #nginx+apache# KVS服务器运行环境搭建过程记录
- Sublime中查找重复行的正则表达式
- hihoCoder #1014 : Trie树 [ Trie ]
- 如何写好PRD文档？
- 机器学习(Machine Learning) - 吴恩达(Andrew Ng) 视频笔记
- 原生webgl学习（六） WebGL写简单的汉字（一）
- 运营版uniapp多商户商城小程序+H5+APP+商家入驻短视频社区种草直播阶梯拼团