Canvas

最新推荐文章于 2023-07-05 19:11:54 发布
最新推荐文章于 2023-07-05 19:11:54 发布
阅读量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项目实战——在线图文编辑器(七)：加粗、斜体、下划线、删除线（下）
石沉溪洞
03-20 1164
上一篇博文中，我们实现了为文字添加和修改加粗、斜体、下划线、删除线。 这篇博文是《前端canvas项目实战——简历制作网站》付费专栏系列博文的第七篇——加粗、斜体、下划线、删除线（下），主要的内容有： 1. 在上一篇实现加粗、斜体、下划线和删除线等功能时遇到bug及其解决方案。 2. 在上一篇的实现中，我们发现了可以对数据进行优化的地方，降低数据存储和前后端传输的数据大小，减少浪费。
前端canvas项目实战——在线图文编辑器(六)：加粗、斜体、下划线、删除线（上）
石沉溪洞
03-20 1584
上一篇博文中，我们实现了对文字的字体、字号和行间距的编辑。 这篇博文是《前端canvas项目实战——简历制作网站》付费专栏系列博文的第六篇——加粗、斜体、下划线、删除线，主要的内容有： 1. 针对文本框（fabric.Textbox）对象： 扩充属性列表，使用户可以为画布中选中的文本框设置加粗、斜体、下划线和删除线。
为图片添加斜体水印并保存水印图片
xiaofanqie0720的博客
03-22 1297
最近遇到个需求，使用手机扫码签名，手机的签名画板需要支持添加平铺的斜体文字水印，然后保存的签名图片也需要水印，这里是分享下如何给图片加斜体水印，先将图片放入到canvas画布中，利用canvas的绘制功能为图片添加斜体的文字水印，然后将整个canvas转成图片保存。 function addWatermark(image, text) { // 获取画布元素，并设置其宽高和图片一样 var canvas = document.getElementById("myCanvas");...
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
canvas 基本用法
似水流年QC的博客
07-05 3280
Canvas 是 HTML5 新增的元素，它就像一块幕布，可通过JavaScript脚本在 Web 页面上绘制图形、动画和其他可视化内容。四、canvas应用场景。一、什么是canvas。二、canvas用法。
canvas画圆
编程界明世隐的博客
01-14 1万+
画圆方法说明 arc(x, y, radius, startAngle, endAngle, anticlockwise) 该方法有六个参数：x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。 这些都是以x轴为基准。参数anticlockwise为一个布尔值。为true时，是逆时针方向，否则顺时针方向。 实例1 window.onload=function(){ var canvas = document.get
canvas隐藏
qq_42318977的博客
01-07 2348
canvas隐藏用hidden=‘true’会销毁canvas，图片也同样销毁。 只需要更改css的属性就可以了。 position:fixed;left:100%;
Android canvas
zenmela2011的专栏
03-13 1万+
1.Canvas Canvas是一个画布，可以在这个画布上进行各种绘图操作。 在Android中，想要获得一个Canvas对象主要有三种方法： ①继承一个View，并重写onDraw()方法。View的Canvas对象会被当做参数传递过来，在这个Canvas上进行的操作会直接反映在View中。 ②调用SurfaceHolder.lockCanvas()返回一个Canvas对象。 ③通过构造方法自己创建一个Canvas对象。 Bitmap bitmap = Bitmap.createBitmap(1
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 等。
canvas
06-01
使用 Canvas 可以在网页中实现动画效果、图表展示、图片处理等功能。Canvas 通过 JavaScript 代码来绘制图形，这意味着我们可以根据需要动态地生成图形，而不需要使用静态的图片。 Canvas 的使用非常灵活，可以在 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值