Canvas学习

最新推荐文章于 2025-04-18 14:30:56 发布
最新推荐文章于 2025-04-18 14:30:56 发布
阅读量99 收藏
点赞数
分类专栏： # Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/asdasd1fdsyrt/article/details/111186206
版权
这篇博客介绍了HTML5 Canvas的基本图形绘制，包括画折线、实心长方形、实心圆、空心扇形和空心圆，并通过实例展示了如何创建动态柱状图。通过设置坐标、颜色和路径，实现不同形状的绘制，最后展示了如何利用这些基础知识来创建数据可视化的柱状图。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

canvas 画布对象
1.画一条折线

<body>
	<canvas id="canvas" width="500" height="500">
		//canvas 默认大小300*150 可以指定画布大小
		//css里面设置style  width不能改变画布大小		  
	</canvas>	
	
	<script type="text/javascript">
		var cav = document.getElementById("canvas");
		var cxt = cav.getContext("2d");		//2D图像
		cxt.moveTo(10,10);		//起点
		cxt.lineTo(500,500);	//画到某点 
		cxt.lineTo(100,500);
		//线条颜色(画之前设置颜色才有效)
		cxt.strokeStyle="coral";
		cxt.stroke();			//开始画
	</script>
		
</body>

在这里插入图片描述
2.实心长方形

<body>

	<canvas id="canvas" width="500" height="500">
		//canvas 默认大小300*150 可以指定画布大小
		//css里面设置style  width不能改变画布大小		  
	</canvas>	
	
	<script type="text/javascript">
		var cav = document.getElementById("canvas");
		var cxt = cav.getContext("2d");			//2D图像
		//实心长方形
		cxt.fillStyle="cadetblue"
		cxt.fillRect(0,0,100,150);	//起点，大小
	</script>	
	
</body>

在这里插入图片描述

3.实心圆

<body>
	<canvas id="canvas" width="500" height="500">
		//canvas 默认大小300*150 可以指定画布大小
		//css里面设置style  width不能改变画布大小		  
	</canvas>	
	
	<script type="text/javascript">
		var cav = document.getElementById("canvas");
		var cxt = cav.getContext("2d");		//2D图像
		//实心圆
		cxt.beginPath();
		cxt.fillStyle="red"
		cxt.moveTo(100,100);		//起点
		//cxt.arc(x,y,r,起点弧度 ,终点弧度[角度]);
		cxt.arc(100,100,100,0,90*Math.PI/180);
		cxt.fill();
	</script>	
	
</body>

在这里插入图片描述

3.空心扇形

<body>
	<canvas id="canvas" width="500" height="500">
		//canvas 默认大小300*150 可以指定画布大小
		//css里面设置style  width不能改变画布大小		  
	</canvas>
		
	<script type="text/javascript">
		var cav = document.getElementById("canvas");
		var cxt = cav.getContext("2d");		//2D图像
		//空心扇形
		cxt.beginPath();		
		cxt.strokeStyle="red"
		cxt.moveTo(100,100);	//起点
		//cxt.arc(x,y,r,起点弧度 ,终点弧度[角度]);
		cxt.arc(100,100,100,0,90*Math.PI/180);
		cxt.closePath();	//闭合closePath
		cxt.stroke();		//画图
	</script>	
	
</body>

在这里插入图片描述

4.空心圆

<body>
	<canvas id="canvas" width="500" height="500">
		//canvas 默认大小300*150 可以指定画布大小
		//css里面设置style  width不能改变画布大小		  
	</canvas>	
	
	<script type="text/javascript">
		var cav = document.getElementById("canvas");
		var cxt = cav.getContext("2d");			//2D图像
		//空心圆
		cxt.beginPath();
		cxt.strokeStyle="red"
		//cxt.arc(x,y,r,起点弧度 ,终点弧度[角度]);
		cxt.arc(100,100,60,0,360*Math.PI/180);
		cxt.closePath();
		cxt.stroke();		//画图
	</script>
		
</body>

在这里插入图片描述

5.组合 空心圆+实心圆

<body>
	<canvas id="canvas" width="500" height="500">
		//canvas 默认大小300*150 可以指定画布大小
		//css里面设置style  width不能改变画布大小		  
	</canvas>
		
	<script type="text/javascript">
		var cav = document.getElementById("canvas");
		var cxt = cav.getContext("2d");		//2D图像
		 	 	
		cxt.beginPath();
		//实心圆
		cxt.arc(100,100,50,0,360*Math.PI/180);
		cxt.fillStyle="red"
		cxt.fill();
		cxt.strokeStyle="blue"
		cxt.lineWidth=5		//线宽
		cxt.stroke();		//画图
		cxt.closePath();
	</script>	
	
</body>

在这里插入图片描述
例子：动态柱状图

<body>
	<canvas id="canvas" width="650" height="600">
		//canvas 默认大小300*150 可以指定画布大小
		//css里面设置style  width不能改变画布大小
	</canvas>
	
	<script type="text/javascript">
		var cav = document.getElementById("canvas");
		var cvsCtx = cav.getContext("2d");		//2D图像
		
		var xItemName = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
        var data = [80, 160, 185, 156, 266, 168, 106];
        //调用绘图
        var option = {
            xList : xItemName,
            data : data
        };
        createImage(option)
		
		//绘图方法
        function createImage(obj) {
            let xList = obj.xList;
            let data = obj.data;
            let itemSp = 80;    	//坐标间隔
            cvsCtx.moveTo(30, 10);		//y轴小箭头(实心)
            cvsCtx.lineTo(34, 6);
            cvsCtx.lineTo(38, 10);
            cvsCtx.moveTo(34, 6);		//y轴竖线
            cvsCtx.lineTo(34, 300); 
            cvsCtx.moveTo(6, 290);		//x轴横线
            cvsCtx.lineTo(600, 290);
            cvsCtx.moveTo(596, 286);	//x轴小箭头
            cvsCtx.lineTo(600, 290);
            cvsCtx.lineTo(596, 294);
            cvsCtx.fillStyle = "red";	//柱状图颜色

            let imageX = 60;   //柱图x轴坐标
            for (let i = 0; i < data.length; i++) {
                const element = data[i];
                //run(数值, x坐标, cvsCtx)
                run(element, imageX, cvsCtx);	//动态图
                imageX += itemSp;
            }
            // cvsCtx.fillRect(140, 290, 50, -120);
            // cvsCtx.fillRect(220, 290, 50, -120);
            // cvsCtx.fillRect(300, 290, 50, -140);
            // cvsCtx.fillRect(380, 290, 50, -130);
            // cvsCtx.fillRect(460, 290, 50, -160);
            // cvsCtx.fillRect(540, 290, 50, -180);
            //y轴文字
            cvsCtx.font = '16px normal 微软雅黑';
            cvsCtx.fillStyle = "#000";
            //cvsCtx.fillText('text', x, y);
            cvsCtx.fillText('y轴', 0, 16);
            
            //x轴文字
            let itemTextX = 70;	//文字x轴坐标
            for (let i = 0; i < xList.length; i++) {
                const element = xList[i];
                cvsCtx.fillText(element, itemTextX, 310);
                itemTextX += itemSp;
            }
            // cvsCtx.fillText('周一', 70, 310);
            // cvsCtx.fillText('周二', 150, 310);
            // cvsCtx.fillText('周三', 230, 310);
            // cvsCtx.fillText('周四', 310, 310);
            // cvsCtx.fillText('周五', 390, 310);
            // cvsCtx.fillText('周六', 470, 310);
            // cvsCtx.fillText('周日', 550, 310);

            //每一个柱状图上的数字
            let imageTextX = 70;
            for (let i = 0; i < data.length; i++) {
                const element = data[i];
                cvsCtx.fillText(element, imageTextX, 300 - element - 20);
                imageTextX += itemSp;
            }
            // cvsCtx.fillText('170', 70, 300 - 190);
            // cvsCtx.fillText('120', 150, 300 - 140);
            // cvsCtx.fillText('120', 230, 300 - 140);
            // cvsCtx.fillText('140', 310, 300 - 160);
            // cvsCtx.fillText('130', 390, 300 - 150);
            // cvsCtx.fillText('160', 470, 300 - 180);
            // cvsCtx.fillText('180', 550, 300 - 200);
            cvsCtx.stroke();
        }
        
        //动态效果
        function run(element, imageX, cvsCtx) {
            let x = 0;
            var time = setInterval(() => {
                if (x > -element) {
                    cvsCtx.fillStyle = "red";
                    cvsCtx.clearRect(imageX, 290, 50, -element);
                    cvsCtx.fillRect(imageX, 290, 50, x);
                    x -= 3;
                } else {
                    clearInterval(time);		//关闭函数
                }
            }, 4);
        }
	</script>
	
</body>

在这里插入图片描述

Canvas学习参考文档
流楚丶格念的博客
02-01 6504
文章目录Canvas初识什么是Canvas？创建Canvas元素Canvas坐标系通过JavaScript来绘制Canvas的基本使用图形绘制设置样式画笔实例练习渐变色绘制镂空的房子绘制坐标网格绘制坐标系绘制坐标点绘制折线图参考文档Canvas图形绘制矩形绘制createLinearGradient()方法圆弧绘制弧度概念用三角函数体验曲线的绘制arc() 方法画圆弧圆实例练习绘制六种颜色等分的圆绘制扇形绘制数据饼图绘制文本案例：画布中心绘制文字圆与文本综合案例：数据饼状图做动画绘制图片drawImage(
canvas学习
11-22
在这个“canvas学习”的压缩包中，你将找到关于canvas的基本语法和学习笔记，这对于想要掌握这个技术的前端开发者来说是非常宝贵的资源。 1. **Canvas元素** - `canvas`标签是HTML5中的一个新元素，用于在网页上...
利用js中的canvas绘制爱心
JonnyJiang-zh的博客
08-03 875
js代码如下： var cav = document.getElementById("a").getContext("2d"); function draw(x, y,c){ cav.beginPath(); cav.fillStyle = c; cav.moveTo(x, y); cav.lineWidth = 3; cav.bezierCurveTo(130 ,65,150,110,100,150); cav.bezierCurveTo(35,85,95,75,100,100)
Canvas学习笔记
科华在线
12-16 1233
2023.12.15按照官方的文档安装production，安装了Ubuntu 20.04.6 LTS服务器版。安装过程比较顺利，除了git clone试了多次才成功。官方安装文档安装node.js有一处错误，
canvas 学习
m0_52163529的博客
04-22 602
同时，这次的项目需求还有关生成图片等，为了保证代码的简洁和正确度，需要借助第三方包完成，就也查找了很多资源，最后选定了 wxml2canvas 实现在小程序上将 wxml 元素转换为 canvas 元素。将wxml指定节点转换成canvas元素. Contribute to wg-front/wxml2canvas development by creating an account on GitHub.这期是潘潘整理的万字canvas入门教程，带你光速入门canvas基础绘画!( 近1万字吐血总结)
canvas学习笔记
前端码农
12-12 1040
canvas学习笔记
Canvas学习总结
u012475786的专栏
01-25 942
Canvas学习总结 一.什么是Canvas Canvas属于HTML5新特性API，主要增强在浏览器绘制图像功能；当然一些简单的矢量图我们可以通过html标签进行拼接组装，也可以绘制SVG图像；但是对于位图(.jpg/.png)等格式的图片处理canvas有着不可比拟的优势； 二.canvas的基本实现 1.怎样定义canvas canvas的实现其实是通过<canvas...
canvas学习二
越努力，越幸运！
04-07 3059
一、绘制文字 【1】font字体属性 canvas里的font属性和css的font属性是一样的，它可以设置文本的粗细、字号、字体等 css设置字体：p{font:bold15px 微软雅黑;} canvas设置字体：ctx.font='bold15px微软雅黑' 【2】textAlign水平对齐 textAlign设置或返回文本内容的当前对齐方式 start： 默认,文本在指定的位置开始 end： 文本在指定的位置结束 center： 文本的...
Canvas学习1 绘制图形
qziovv的博客
04-18 618
学习绘制矩形，三角形，直线，圆弧和曲线绘制物体到 Canvas 前，需掌握路径，我们看看到底怎么做。
canvas学习一
越努力，越幸运！
04-06 3764
一、什么是canvas？ canvas是 HTML5 的标签元素，使用 JavaScript 在canvas里绘制图像。canvas画布是一个矩形区域，你可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 二、为什么需要学canvas？ 我们可以使用canvas 绘制复杂图形，处理图像，开发游戏，做动画，处理视频… div+css canvas 三、创建 canvas 元素 通过 width 和 height 设置 canvas 画布的宽高，默认.
HTML Canvas 学习过程中的一些代码.zip
11-08
通过这些实际案例的学习，用户可以逐步构建起对 Canvas API 的认识，并能够灵活运用于自己的项目开发中。内容涵盖了如何使用 JavaScript 控制画布、绘制形状（如线条、矩形、圆形等）、处理图像和文字渲染等方面。每...
canvas学习和滤镜实现代码
12-14
【canvas学习和滤镜实现代码】 在当前的数字化时代，摄影成为了日常生活的重要组成部分，而为了达到理想中的美照效果，美颜滤镜扮演了关键角色。这些滤镜通过特定的算法改变图像像素，创造出各种视觉特效。...
自动驾驶规划与控制算法详解：从Apollo 6.0 EMplanner到PID、模糊控制、LQR、MPC
05-27
内容概要：本文深入探讨了自动驾驶领域的规划与控制算法，重点介绍了Apollo 6.0的EMplanner规划模块和常用的控制算法如PID、模糊控制、LQR、MPC。规划部分涵盖了路径规划、决策制定、安全性、效率和实时性的实现；控制部分详细解析了各控制算法的原理及其在自动驾驶中的应用。此外，作者还分享了丰富的实践经验，强调了实践、安全、灵活运用算法和持续学习的重要性。 适合人群：对自动驾驶技术感兴趣的工程师、研究人员及即将进入该领域的毕业生。 使用场景及目标：①理解和掌握自动驾驶规划与控制的基本原理和技术；②对比不同控制算法的特点和应用场景；③获取宝贵的行业经验和职业发展指导。 其他说明：本文不仅提供了理论知识，还结合了大量实际工作经验，有助于读者更好地应对技术和职业挑战。
### 【大数据技术】Hadoop、Flink、Hive、Spark、Kafka、Zookeeper、HBase安装与配置指南：构建分布式集群系统
05-27
内容概要：本文档详细介绍了在三台CentOS 7服务器（IP地址分别为192.168.0.157、192.168.0.158和192.168.0.159）上安装和配置Hadoop、Flink及其他大数据组件（如Hive、MySQL、Sqoop、Kafka、Zookeeper、HBase、Spark、Scala）的具体步骤。首先，文档说明了环境准备，包括配置主机名映射、SSH免密登录、JDK安装等。接着，详细描述了Hadoop集群的安装配置，包括SSH免密登录、JDK配置、Hadoop环境变量设置、HDFS和YARN配置文件修改、集群启动与测试。随后，依次介绍了MySQL、Hive、Sqoop、Kafka、Zookeeper、HBase、Spark、Scala和Flink的安装配置过程，包括解压、环境变量配置、配置文件修改、服务启动等关键步骤。最后，文档提供了每个组件的基本测试方法，确保安装成功。 适合人群：具备一定Linux基础和大数据组件基础知识的运维人员、大数据开发工程师以及系统管理员。 使用场景及目标：①为大数据平台搭建提供详细的安装指南，确保各组件能够顺利安装和配置；②帮助技术人员快速掌握Hadoop、Flink等大数据组件的安装与配置，提升工作效率；③适用于企业级大数据平台的搭建与维护，确保集群稳定运行。 其他说明：本文档不仅提供了详细的安装步骤，还涵盖了常见的配置项解释和故障排查建议。建议读者在安装过程中仔细阅读每一步骤，并根据实际情况调整配置参数。此外，文档中的命令和配置文件路径均为示例，实际操作时需根据具体环境进行适当修改。
欧姆龙CJCP程序在锂电池贴胶检测线中的PLC通信与多机协同控制方案
最新发布
05-27
内容概要：本文详细介绍了欧姆龙CJ/CP系列程序在全自动CE锂电池贴胶检测机中的应用。该系统基于欧姆龙CP1H-XA主机和CIF串口模块，实现了高效的PLC通信与多机协同操作。主要功能包括轴控制、一键换型、故障记录、产量统计及OEE计算等。此外，还提供了优质的触摸屏程序模板和多种可重复调用的功能块，如气缸报警、真空报警和轴实时位置脉冲转毫米功能块。整条生产线由四台不同功能的机器组成，配备四套PLC和触摸屏程序，采用八套主从站控制，确保系统的高可靠性和强大适应性。 适合人群：从事工业自动化领域的工程师和技术人员，特别是对PLC编程和控制系统有需求的专业人士。 使用场景及目标：适用于需要构建高效稳定的锂电池贴胶检测生产线的企业。目标是提高生产效率、减少停机时间、优化资源配置并提升产品质量。 其他说明：文中不仅提供了详细的硬件配置介绍，还包括具体的梯形图和ST代码示例，帮助读者更好地理解和实施相关技术。
音乐APP界面设计素材Music App ui设计psd源文件.rar
05-27
音乐APP界面设计素材Music App ui设计psd源文件.rar
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值