Canvas

最新推荐文章于 2021-03-22 15:21:17 发布
最新推荐文章于 2021-03-22 15:21:17 发布
阅读量142 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_45128748/article/details/107550284
版权

Canvas

canvas元素：该元素只是图形的容器，必须使用JavaScript脚本绘制图形
实际上canvas元素本身并不绘制图形，它相当于一张空画布
获取canvas元素对应的DOM对象：var canvas=document.getElementById('mc');
获取canvas上绘图的CanvasRenderingContext2D对象：
var ctx =canvas.getContext('2d');
ctx：真正的绘图对象

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
		<title>画图入门</title>
	</head>
	<body>
	<h2>画图入门</h2>
	<!--canvas元素：该元素只是图形的容器，必须使用JavaScript脚本绘制图形-->
	<canvas id="mc" width="300" height="180"
		style="border:1px solid black"></canvas>
	<script type="text/javascript">
	//实际上canvas元素本身并不绘制图形，它相当于一张空画布
	//获取canvas元素对应的DOM对象
		var canvas=document.getElementById('mc');
	//获取canvas上绘图的CanvasRenderingContext2D对象
		var ctx =canvas.getContext('2d');
		//ctx：真正的绘图对象
		ctx.fillStyle='#f00';	
		//绘制矩形
		ctx.fillRect(30,10,80,100);//前两个代表相对canvas元素的坐标，后两个代表宽和高
	</script>
	</body>
</html>

在这里插入图片描述

填充一个矩形（若不设置填充颜色，默认为黑色）：ctx.fillRect(*,*,*,*);
绘制一个矩形边框(未填充颜色）：ctx.strokeRect(*,*,*,*);
前两个参数代表相对canvas元素的坐标，后两个参数代表宽和高
设置填充颜色：ctx.fillStyle="...";
设置线条颜色：ctx.strokeStyle="...";
设置笔触的线条宽度：ctx.lineWidth=10;
设置线条连接点的风格，有miter（尖角）,round（圆角）,bevel（斜角）三种风格：ctx.lineJoin="round";

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
		<title>绘制矩形</title>
	</head>
	<body>
	<h2>绘制矩形</h2>
	<canvas id="mc1" width="400" height="280"
		style="border:1px solid black"></canvas>
	<script type="text/javascript">
	//获取canvas元素对应的DOM对象
		var canvas=document.getElementById('mc1');
	//获取canvas上绘图的CanvasRenderingContext2D对象
		var ctx=canvas.getContext('2d');
		ctx.fillStyle="#f00";//设置填充颜色
		ctx.fillRect(30,20,120,60);//设置一个矩形
		ctx.fillStyle="#ff0";
		ctx.fillRect(80,60,120,60);
		ctx.strokeStyle="#00f";//设置线条颜色	
		ctx.lineWidth=10;//设置笔触的线条宽度
		ctx.strokeRect(30,130,120,60);//绘制一个矩形边框
		ctx.strokeStyle="#0ff";
		ctx.lineJoin="round";//设置线条连接点的风格，有miter（尖角）,round（圆角）,bevel（斜角）三种风格
		ctx.strokeRect(80,160,120,60);
		ctx.strokeStyle="#f0f";
		ctx.lineJoin="bevel";
		ctx.strokeRect(130,190,120,60);
	</script>	
	</body>
</html>

在这里插入图片描述

textBaseline:设置字符串的垂直对齐方式，有top、hanging、middle、bottom的属性
textAlign：设置字符串的水平对齐方式，有start、end、left、right、center等属性
Italic是使用文字的斜体，Oblique是让没有斜体属性的文字倾斜
font：设置字体
fillText：填充字符串，两个数字为坐标：ctx.fillText('字符串',0,0);
strokeText：绘制字符串的边框，两个数字为坐标：ctx.strokeText('字符串',50,50);

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
		<title>测试</title>
	</head>
	<body>
	<h2>绘制文字</h2>
	<canvas id="mc2" width="600" height="280"
		style="border:1px solid black"></canvas>
	<script type="text/javascript">
	//获取canvas元素对应的DOM对象
		var canvas=document.getElementById('mc2');
	//获取canvas上绘图的CanvasRenderingContext2D对象
		var ctx=canvas.getContext('2d');
		ctx.textBaseline="top";//textBaseline:设置字符串的垂直对齐方式，有top、hanging、middle、bottom的属性
				//textAlign：设置字符串的水平对齐方式，有start、end、left、right、center等属性
		//Italic是使用文字的斜体，Oblique是让没有斜体属性的文字倾斜
		ctx.fillStyle="#00f";//设置填充颜色
		ctx.font="italic 50px 隶书";//font：设置字体
		ctx.fillText('疯狂Java讲义',0,0);//fillText：填充字符串，两个数字为坐标
		
		ctx.fillStyle="#00f";//设置填充颜色
		ctx.font="oblique 50px 华文琥珀";//font：设置字体
		ctx.fillText('疯狂Java讲义',300,0);//fillText：填充字符串，两个数字为坐标
		
		ctx.strokeStyle='#f0f';//设置线条颜色
		ctx.font='bold 45px 宋体';
		ctx.strokeText('疯狂Java讲义',50,50);//strokeText：绘制字符串的边框，两个数字为坐标
		
		ctx.strokeStyle='#f0f';
		ctx.font='bold 45px 楷体';
		ctx.strokeText('疯狂Java讲义',50,100);//strokeText：绘制字符串的边框，两个数字为坐标
		
		ctx.strokeStyle='#f0f';
		ctx.font='bold 45px 黑体';
		ctx.strokeText('疯狂Java讲义',50,150);//strokeText：绘制字符串的边框，两个数字为坐标
		
		ctx.strokeStyle='#f0f';
		ctx.font='bold 45px 华文行楷';
		ctx.strokeText('疯狂Java讲义',50,200);//strokeText：绘制字符串的边框，两个数字为坐标
	</script>	
	</body>
</html>

在这里插入图片描述

shadowBlur:设置阴影的模糊程度，值越大，阴影的模糊程度越大
shadowColor：设置阴影颜色
设置阴影在x,y方向上的偏移：ctx.shadowOffsetx=10;ctx.shadowOffsetY=-8;

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
		<title>测试</title>
	</head>
	<body>
	<h2>启用阴影</h2>
	<canvas id="mc3" width="600" height="280"
		style="border:1px solid black"></canvas>
	<script type="text/javascript">
	//获取canvas元素对应的DOM对象
		var canvas=document.getElementById('mc3');
	//获取canvas上绘图的CanvasRenderingContext2D对象
		var ctx=canvas.getContext('2d');
		ctx.shadowBlur=5.6;//shadowBlur:设置阴影的模糊程度，值越大，阴影的模糊程度越大
		ctx.shadowColor="#222";//shadowColor：设置阴影颜色
		ctx.shadowOffsetx=10;//设置阴影在x,y方向上的偏移
		ctx.shadowOffsetY=-8;
		ctx.fillStyle="#00f";
		ctx.font="italic 50px 隶书";
		ctx.textBaseline="top";
		ctx.fillText('疯狂Java讲义',0,0);
		ctx.strokeStyle='#f0f';
		ctx.font='bold 45px 宋体';
		ctx.strokeText('疯狂Java讲义',50,50);
		ctx.fillRect(20,150,180,80);
		ctx.lineWidth=8;
		ctx.strokeRect(300,150,180,80);
	</script>	
	</body>
</html>

在这里插入图片描述

开始定义路径:ctx.beginPath();
添加一段圆弧：
ctx.arc(i*25,i*25,(i+1)*8,0,Math.PI*2,true);
arc：前两个参数指定圆弧的圆心，第三个参数指定圆弧的半径，第四五个参数用于设角度，结束角度，最后一个参数用于设置是否顺时针旋转
关闭路径：ctx.closePath();//
设置填充颜色,颜色可以用数字代表，0-255 黑-白：
ctx.fillStyle='rgba(255,0,255,'+(10-i)*0.1+')';
填充当前路径：ctx.fill();

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
		<title>测试</title>
	</head>
	<body>
	<h2>绘制圆形</h2>
	<canvas id="mc4" width="600" height="280"
		style="border:1px solid black"></canvas>
	<script type="text/javascript">
	//获取canvas元素对应的DOM对象
		var canvas=document.getElementById('mc4');
	//获取canvas上绘图的CanvasRenderingContext2D对象
		var ctx=canvas.getContext('2d');
		for(var i=0;i<10;i++)
		{
			//开始定义路径
			ctx.beginPath();
			//添加一段圆弧
			//arc：前两个参数指定圆弧的圆心，第三个参数指定圆弧的半径，第四五个参数用于设角度，结束角度，最后一个参数用于设置是否顺时针旋转
			ctx.arc(i*25,i*25,(i+1)*8,0,Math.PI*2,true);
			ctx.closePath();//关闭路径
			ctx.fillStyle='rgba(255,0,255,'+(10-i)*0.1+')';//设置填充颜色,颜色可以用数字代表，0-255 黑-白
			ctx.fill();//填充当前路径
		}
	</script>	
	</body>
</html>

在这里插入图片描述

xiaoxiaojinglinger
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
canvas文字绘制（大小、粗体、倾斜、对齐、基线）
一起coding，一起嗨。
08-09 2万+
canvas文字绘制文字填充方式、字体各种设置属性。
Canvas---文字的绘制
RainMcCom的博客
08-22 2382
文字1.与Paint相关的设置//普通设置 paint.setStrokeWidth (5);//设置画笔宽度 paint.setAntiAlias(true); //指定是否使用抗锯齿功能，如果使用，会使绘图速度变慢 paint.setStyle(Paint.Style.FILL);//绘图样式，对于设文字和几何图形都有效 paint.setTextAlign(Align.CENT
为图片添加斜体水印并保存水印图片
xiaofanqie0720的博客
03-22 1297
最近遇到个需求，使用手机扫码签名，手机的签名画板需要支持添加平铺的斜体文字水印，然后保存的签名图片也需要水印，这里是分享下如何给图片加斜体水印，先将图片放入到canvas画布中，利用canvas的绘制功能为图片添加斜体的文字水印，然后将整个canvas转成图片保存。 function addWatermark(image, text) { // 获取画布元素，并设置其宽高和图片一样 var canvas = document.getElementById("myCanvas");...
android平台canvas贴文字、斜体
wulong710的专栏
09-26 2604
canvas贴文字、斜体 public static void drawGameState(final Canvas canvas, int level, int gold, int score, int time) { Paint paint = new Paint(); String str = "关卡:" + level + " 现金:" +
canvas截屏
04-19
在H5开发中，Canvas作为一个强大的绘图工具，可以用于创建动态图形、图像处理和实现游戏等多样化功能。而“canvas截屏”则是利用Canvas API来捕获网页的一部分或者整个页面，生成一个图像数据，通常以PNG或JPEG格式...
canvas裁剪
06-23
"canvas裁剪"是Canvas API中的一个重要功能，它允许开发者选取图像的一部分并进行操作，例如保存、显示或者进一步处理。在本文中，我们将深入探讨Canvas裁剪的原理、方法和实际应用。 首先，裁剪Canvas的基础在于`...
canvas实现环形进度条效果
08-31
Canvas 实现环形进度条效果 本文主要介绍了使用 Canvas 实现环形进度条效果的实例，具有很好的参考价值。下面，我们来详细介绍这个实例。 知识点 1：Canvas 基础 Canvas 是 HTML5 中的一个重要元素，用于创建图形...
vue+canvas绘制图形
01-09
在`Canvas.vue`内部，我们将定义`<canvas>`标签，并通过JavaScript来操作其上下文（`canvas.getContext('2d')`），实现图形的绘制。 描述中提到的“封装好的绘制圆形、矩形以及不规则图形的方法”，这通常意味着...
canvas教程
08-16
Canvas 教程 本资源提供了详细的 canvas 使用技巧和相关技术阐述，对于初涉 JavaScript 和 canvas 相关技术的朋友有极大地帮助。 canvas 是新的 HTML 元素，可以通过 Script（通常是 JavaScript）绘制图形，用于...
数据分析的核心技能和方法
07-19
数据分析的核心技能和方法
毕业设计javajsp人寿保险销售网站(ssh)-qkrp源码含文档工具包
07-19
毕业设计javajsp人寿保险销售网站(ssh)-qkrp源码含文档工具包 后台是ssh框架，页面是jsp，数据库mysql，jdk1.8，开发工具用ecplise、myecplise、sts、idea都可以 平湖人寿保险公司保险销售网站分为用户和管理员两个部分 前台部分（用户界面）： 1、资讯浏览功能： （1）新闻资讯浏览 （2）新闻资讯查询 （3）公司简介 （4）通知公告 2、用户登录注册功能： （1）注册 （2）登录 3、用户管理功能 （1）个人信息管理 （2）订单管理 4、保险购买功能： （1）保险产品浏览 （2）保险产品查询 （3）保险产品购买 后台管理（管理员界面） 1、管理员登录功能： 管理员在管理员登录界面输入用户名和密码，即可登录管理员的界面。 2、资讯管理功能： （1）新闻资讯管理 （2）公司简介管理 （3）通知公告管理 3、保险产品管理： （1）保险产品信息管理 （2）保险产品查询 4、会员管理： （1）会员删除 （2）会员级别管理 5、统计管理： （1）保险产品销售量统计 （2）有效会员数量统计 包含：源码、数据库脚本、论文、环境工具包、相同框架项目的安装教程
毕业设计javajsp公共课考试系统(ssh)-qlkrp源码工具包
07-19
毕业设计javajsp公共课考试系统(ssh)-qlkrp源码工具包 后台是ssh框架，页面是jsp，数据库mysql，jdk1.8，开发工具用ecplise、myecplise、sts、idea都可以 题库 试卷信息管理 阅卷 统计功能 包含：源码、数据库脚本、环境工具包、相同框架项目的安装教程（在说明文档中）
揭秘黑箱：YOLO预测结果的可解释性探究
07-19
YOLO（You Only Look Once）是一种流行的实时对象检测系统，最初由 Joseph Redmon 等人在 2015 年提出。它的核心思想是将对象检测任务视为一个回归问题，直接从图像像素到边界框坐标和类别概率的映射。YOLO 以其快速和高效而闻名，特别适合需要实时处理的应用场景。 以下是 YOLO 的一些关键特点： 1. **单次检测**：YOLO 模型在单次前向传播中同时预测多个对象的边界框和类别概率，不需要多次扫描图像。 2. **速度快**：YOLO 非常快速，能够在视频帧率下进行实时检测，适合移动设备和嵌入式系统。 3. **端到端训练**：YOLO 模型可以从原始图像直接训练到最终的检测结果，无需复杂的后处理步骤。 4. **易于集成**：YOLO 模型结构简单，易于与其他视觉任务（如图像分割、关键点检测等）结合使用。 5. **多尺度预测**：YOLO 可以通过多尺度预测来检测不同大小的对象，提高了检测的准确性。 YOLO 已经发展出多个版本，包括 YOLOv1、YOLOv2（也称为 YOLO9000）、YOLOv3、YOLOv4 和 YOLOv5 等。
吃鸡pubg适用于罗技GHUB的鼠标宏
07-19
安装步骤如下！ 导入lua宏到GHUB的步骤如下： 1. 打开GHUB，选择你的罗技鼠标。 2. 转到“宏”选项卡，创建一个新的宏。 3. 在宏编辑器中，点击“导入”，选择"pubg1.lua"文件。 4. 宏会自动加载lua文件中的所有操作，你可以调整它们的顺序或延迟时间，以适应自己的游戏风格。 5. 将这个宏绑定到鼠标上的任意按键，就可以在游戏中使用了
基于海洋捕食者优化算法MPA-VMD实现信号去噪目标函数为包络信息熵 包络熵 排列熵 样本熵最小附matlab代码.rar
07-19
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
工业控制系统安全测评指导书（二级）
最新发布
07-20
工业控制系统安全测评指导书（二级）
canvas
06-01
Canvas 是 HTML5 中新增的一个标签，它可以用来绘制图形，包括直线、矩形、圆形、文本等各种图形。使用 Canvas 可以在网页中实现动画效果、图表展示、图片处理等功能。Canvas 通过 JavaScript 代码来绘制图形，这意味着我们可以根据需要动态地生成图形，而不需要使用静态的图片。 Canvas 的使用非常灵活，可以在 HTML 页面中直接使用 `<canvas>` 标签，也可以通过 JavaScript 动态地创建 Canvas 元素。Canvas 提供了各种 API，可以用来绘制不同的图形，如绘制线条、矩形、圆形、文字等，同时也支持图形的变换、裁剪、合成等操作。 以下是一个简单的 Canvas 示例代码，用来绘制一个红色的矩形： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Canvas Demo</title> </head> <body> <canvas id="my-canvas" width="200" height="200"></canvas> <script> const canvas = document.getElementById('my-canvas'); const ctx = canvas.getContext('2d'); ctx.fillStyle = 'red'; ctx.fillRect(50, 50, 100, 100); </script> </body> </html> ``` 上面的代码中，我们首先使用 `<canvas>` 标签创建了一个宽度为 200 像素、高度为 200 像素的 Canvas 元素，然后通过 JavaScript 获取到了该元素，并获取了它的 2D 上下文对象，接着使用 `fillStyle` 属性设置了填充颜色为红色，最后使用 `fillRect()` 方法绘制了一个矩形。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值