当前位置： 首页 > article >正文

canvas绘制线段、矩形、圆形、文字、贝塞尔曲线、图像、视频处理、线性渐变、径向渐变、坐标变化，旋转，缩放，图形移动

article 2024/12/26 14:20:41

测试canvas.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Canvas</title>
	<style>
		#myCanvas {
			box-shadow: 6px 9px 80px 13px rgba(0,0,0,.65);
			margin: 50px 400px;
		}
	</style>
</head>
<body>
	<canvas id="myCanvas" width="500" height="500">
		<img src="不支持canvas标签图片" width="150" height="150">
	</canvas>
	<video src="img/video.mp4" id="video" width="0" height="0">
			您的浏览器不支持video标签
	</video>
</body>
	<script src="js/jquery-2.2.4.min.js"></script>
	<!-- 绘制线段 -->
	<!-- <script src="js/canvas1.js"></script> -->
	<!-- 绘制矩形&&线性渐变-->
	<!-- <script src="js/canvas2.js"></script> -->
	<!-- 绘制圆形&&径向渐变 -->
	<!-- <script src="js/canvas3.js"></script> -->
	<!-- 绘制文字 -->
	<!-- <script src="js/canvas4.js"></script> -->
	<!-- canvas坐标变换,旋转,缩放&&图形移动 -->
	<!-- <script src="js/canvas5.js"></script> -->
	<!-- 绘制贝塞尔曲线 -->
	<!-- <script src="js/canvas6.js"></script> -->
	<!-- 图像重叠处理 -->
	<!-- <script src="js/canvas7.js"></script> -->
	<!-- 绘制图像 -->
	<!-- <script src="js/canvas8.js"></script> -->
	<!-- 视频处理 -->
	<!-- <script src="js/canvas9.js"></script> -->
</html>

绘制线段 canvas1.js

1.开启轨迹路径
2.设置线段的起始点
3.设置线段的终点
4.设置线段的样式
5.开始绘制线段

// file name : canvas1.js
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");

//1.开启轨迹的绘制
ctx.beginPath();

//2.设置线段绘制的起始点
ctx.moveTo(20,20);

//3.设置线段绘制的结束点
ctx.lineTo(20,200);

//以上一条线段的终点作为下一条线段的起始点
ctx.lineTo(200,20);

//使整个轨迹的绘制形成一个封闭的轨迹
ctx.closePath();

//4:设置线段的样式(可选)
ctx.lineWidth = 6;//线条宽度
ctx.lineJoin = "round";

var grans = ctx.createLinearGradient(20,0,200,0);
grans.addColorStop(0,"red");
grans.addColorStop(0.5,"yellow");
grans.addColorStop(0.8,"blue");
ctx.strokeStyle = grans;

//5:让画笔按照上面设置开始绘制线段
ctx.stroke();


//设置线段其他样式

/*绘制渐变色（线性渐变）
 createLinearGradient():四个参数分别对应开始渐变的位置坐标
 和结束渐变的位置坐标,四个参数决定整个渐变的方向
 */
var grans = ctx.createLinearGradient(20,0,200,0);
grans.addColorStop(0,"red");
grans.addColorStop(0.5,"yellow");
grans.addColorStop(0.8,"blue");
/*
ctx.addColorStop(offset,color);
参数1:设定的颜色离渐变结束点的偏移量,值[0,1]
参数2:对应的是一个具体的颜色,是一个字符串类型
*/

//ctx.strokeStyle = grans;//线条颜色
//ctx.lineCap = "square";//设置线条两端的样式,默认是butt(边界)
//ctx.lineJoin = "miter";
//设置线条交点的样式默认是miter(尖角),除此之外还有bevel(斜角),round(圆角)

绘制矩形&&线性渐变 canvas2.js

// file name: canvas2.js
//canvas矩形的绘制
var myCanvas = document.getElementById("myCanvas");

var ctx = myCanvas.getContext("2d");



// var grans = ctx.createLinearGradient(0,200,0,300);
// grans.addColorStop(0.2,"red");
// grans.addColorStop(0.5,"yellow");
// grans.addColorStop(0.8,"green");
		
/*区别
 strokeRect():绘制矩形外边框
 fillRect():绘制矩形内部区域
*/
		
		
//ctx.strokeStyle = grans;
//ctx.strokeRect(200,200,100,100);
	
// ctx.fillStyle = grans;
ctx.fillRect(200,200,100,100);

绘制圆形&&径向渐变 canvas3.js

// file name: canvas3.js

//canvas圆弧的绘制
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");

ctx.beginPath();

/*var cles = ctx.createRadialGradient(250,250,50,250,50,200);
cles.addColorStop(0,"red");
cles.addColorStop(.5,"yellow");
cles.addColorStop(1,"blue");
*/

//角度按照顺时针false的方向计算的
ctx.arc(250,250,200,0,Math.PI,false);

//ctx.lineTo(250,250);
ctx.closePath();
ctx.lineWidth = 2;
//ctx.fillStyle = cles;

ctx.stroke();

绘制文字 canvas4.js

// file name: canvas4.js
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");
/*
 * canvas绘制文字
 */

// var fc = ctx.createLinearGradient(200,0,400,0);
// fc.addColorStop(0,"red");
// fc.addColorStop(.3,"yellow");
// fc.addColorStop(.6,"blue");

ctx.font = "50px STKaiTi";

//设置文字的阴影

//ctx.shadowOffsetX = 4; //设置阴影x方向的偏移
//ctx.shadowOffsetY = 4; //设置阴影y方向的偏移
//ctx.shadowColor = "gray"; //设置阴影的颜色
//ctx.shadowBlur = 5; //设置阴影的模糊程度

//ctx.fillStyle = fc;
ctx.fillText("诸葛亮",200,200,200);


// ctx.strokeStyle = fc;
// ctx.strokeText("诸葛亮",200,200,200);

canvas坐标变换,旋转,缩放&&图形移动 canvas5.js

// file name: canvas5.js
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");

/*
 canvas变换:
 1.平移
 2.旋转
 3.缩放
 */

ctx.fillStyle = "red";
ctx.fillRect(0,0,100,100);

/*
*  1.平移操作只会影响后面图形的位置,
* 但是不会影响平移之前的图形位置
*/
ctx.translate(50,50);//平移分别设置x,y方向的平移量
ctx.rotate(Math.PI/4);//旋转,设置对应的旋转角度,弧度
ctx.scale(0.5,0.5);//缩放,分别设置x,y方向的缩放比例,小于1代表缩小,大于1代表放大
ctx.fillStyle = "blue";
ctx.fillRect(0,0,100,100);
		
		
/*
*图形的移动
*/

// var centerX = 10,centerY = 10;
// var timer = setInterval(function(){
// 	//清除画布的操作,用来清除canvas标签上面的所有内容
// 	ctx.clearRect(0,0,myCanvas.width,myCanvas.height);

// 	ctx.beginPath();
// 	ctx.arc(centerX,centerY,10,0,Math.PI*2,false);
// 	ctx.closePath();

// 	ctx.fillStyle = "red";
// 	ctx.fill();

// 	centerX += 1;
// 	centerY += 1;
// },24);

绘制贝塞尔曲线 canvas6.js

// file name: canvas6.js
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");

/*
 绘制贝塞尔曲线
 
 ctx.quadraticCurveTo():绘制二次贝塞尔曲线,拥有四个参数
 参数1,2代表曲线的起点和终点之间点的坐标,参数3,4代表终点坐标

 bezierCurveTo():绘制三次贝塞尔曲线,拥有六个参数
 参数1,2,3,4代表曲线起点和终点之间的两个点坐标,参数5,6代表终点坐标

*/

ctx.beginPath();
ctx.moveTo(20,200);

//2次贝塞尔曲线
ctx.quadraticCurveTo(60,20,200,200);
//3次贝塞尔曲线
// ctx.bezierCurveTo(50,100,80,300,200,200);
// ctx.strokeStyle = "blue";

ctx.lineWidth = 3;
ctx.closePath();
ctx.stroke();

图像重叠处理 canvas7.js

// file name: canvas7.js

var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");

ctx.beginPath();
ctx.arc(100,100,50,0,Math.PI*2,false);
ctx.closePath();
ctx.fillStyle = "red";
ctx.fill();

/*
 ctx.globalCompositeOperation的值:

 source-in:绘制新图中和原图的重叠区域
 source-out:绘制新图中和原图的未重叠区域
 destination-in:绘制原图中和新图的重叠区域
 destination-out:绘制原图中和新图的未重叠区域
 destination-over:在原有图形下绘制新图形
 destination-atop:绘制原图中和新图的重叠区域以及新图中未重叠区域
 lighter:绘制新图和原图,但是重叠部分做加色处理
 copy:只绘制新图内容
 */


ctx.globalCompositeOperation = "destination-over";

ctx.beginPath();
ctx.arc(150,100,50,0,Math.PI*2,false);
ctx.closePath();
ctx.fillStyle = "green";
ctx.fill();

绘制图像 canvas8.js

// file name: canvas8.js
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");

//创建图片的对象(img对象)
var img = new Image();
img.src = "img/2.jpg";

img.onload = function(){
	/*drawImage(image,
				sourceX,
				sourceY,
				sourceWidth,
				sourceHeight,
				destX,
				destY,
				destWidth,
				destHeight);
	 drawImage(img,x,y,width,height):将图片绘制到对应的canvas标签上面.
	 该方法的参数共分为三种
	 1.含有三个参数:参数1代表绘制的参考图片,参数2,3代表图片绘制的初始位置.
	 2.含有5个参数:参数1,2,3同上,参数4,5代表图片在canvas中绘制的区域范围.
	 3.含有9个参数:参数1,代表绘制参考图片,参数2,3,4,5代表从参考图片中截取的图片范围
	 参数6,7,8,9代表将截取的图片绘制在canvas中的时候对应的绘制范围.
	 */
	ctx.drawImage(img,0,0);
//	ctx.drawImage(img,0,0,500,600);
//	ctx.drawImage(img,200,100,100,100,20,20,200,200);
	
	//获取canvas标签上指定区域的像素点
	/*
	 getImageData():获取指定区域的图片的像素点,返回值是一个ImageData类型的对象.
	 
	 imagePoints.data返回一个一维数组
	 数组中存的值是R,G,B,A,R,G,B,A....
	 
	 putImageData():将修改后的像素点插入到canvas中对应的位置.共7个参数
	 参数1:修改之后的像素点
	 参数2,3:插入的初始位置坐标
	 参数4,5,6,7:对应需要插入的像素的范围
	 */
	var imagePoints = ctx.getImageData(0,0,500,500);
	var datas = imagePoints.data;

	for(var i = 0;i < datas.length;i+=4){

		var sum = datas[i]+datas[i+1]+datas[i+2];

		datas[i] = 255-datas[i];
		datas[i+1] = 255-datas[i+1];
		datas[i+2] = 255-datas[i+2];
	}

	ctx.putImageData(imagePoints,0,0,0,150,500,350);
	
	/*
	 toDataURL():将canvas标签上面的图像转换成对应的图片链接.
	 */
	
	var URL = myCanvas.toDataURL();
	console.log(URL);
	//window.location.href = URL;

}

视频处理 canvas9.js

// file name: canvas9.js
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");

var video = document.getElementById("video");
/*
 requestAnimationFrame():任务的执行根据浏览器自身的频率执行

 它和setInterval()的区别是:
 (1)requestAnimationFrame()可以过滤隐藏的标签元素,同时可以监听当前的页面是否切换,
 如果切换,会自动暂停对应任务的执行,但是setInterval不可以

 (2)requestAnimationFrame()的执行根据浏览器自身绘制频率执行,但是setInterval()是
 人为规定时间,因此可能会出现丢帧现象

 cancelAnimationFrame()取消动画,但是有兼容问题,低版本支持的不好

*/
video.oncanplay = function(){
	video.play();
	function startDraw(){
		ctx.drawImage(video,0,0,500,500);
		window.requestAnimationFrame(startDraw);
	}
	startDraw();
}

http://www.kler.cn/a/318147.html

相关文章：

  • Linux复习4——shell与文本处理
  • Rasa框架的优点和缺点
  • 掌握 Ansys ACP 中的参考方向：简化复杂的复合材料设计
  • NavMeshAgent直接transform.position移动报错
  • Aec-Library-Website 项目常见问题解决方案
  • Springboot应用开发:配置类整理
  • 使用数据基础描述进行连续变量的特征提取
  • MySQL数据库索引、事务和存储引擎管理
  • Java基础知识扫盲
  • 代码随想录Day 53|题目：110. 字符串接龙、105.有向图的完全可达性、106. 岛屿的周长
  • Taro多端统一开发解决方案
  • 深入理解LLM的可观测性
  • 31. RabbitMQ顺序消费
  • HarmonyOS NEXT：解密从概念到实践的技术创新与应用前景
  • 解决配置文件中有spring.profiles.active = “@spring.profiles.active@“但是读取不到生效的配置文件的问题
  • pg入门17—如何查看pg版本
  • yolo介绍
  • Python画笔案例-059 绘制甩曲彩点动图
  • Linux下搭建iSCSI共享存储-Tgt
  • C++封装
  • 如何在C++中使用Poppler库读取PDF文件（一）
  • 解决方案 | 镭速助力动漫游戏行业突破跨网文件交换瓶颈
  • JUC并发编程_四大函数式接口
  • provide，inject父传子
  • Git使用教程-将idea本地文件配置到gitte上的保姆级别教程
  • 3.postman脚本语言、接口关联(json引用(变量)、脚本用正则表达式)、断言封装、自动化构造接口请求（Postman工具）