Canvas笔记

最新推荐文章于 2024-07-17 09:43:10 发布
最新推荐文章于 2024-07-17 09:43:10 发布
阅读量262 收藏
点赞数
文章标签： canvas html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45775968/article/details/115016138
版权

Canvas笔记

一.canvas概述

Falsh:长久以来，web上的动画大都是由Flash实现的，Flash缺点也很明显，漏洞多，重量大，卡顿与不流畅，需要安装Adobe Flash Player	
Canvas:HTML5提出的新标签，颠覆了Flash的主导地位，是一个轻量级的画布，我们使用Canvas进行JavaScript的编程，不需要额外插件，性能好不卡顿，在手机中也很流畅

1.canvas的标签属性只有width与height，表示宽高，尽量不要用css样式来设置，因为这样画布会失真变形
2.canvas标签内的文本用于低版本浏览器的提示信息（IE6/7/8）
                      高版本浏览器是看不到标签内的文本
3.初次使用
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas width="200px" height="200px" id="myCanvas">
			当前浏览器版本不支持，请升级版本
			</canvas>
		<script> 
		//1.获取canvas元素
		var myCanvas=document.getElementById("myCanvas");
		console.log(myCanvas)
		//2.获取canvas元素的上下文，分为2d的上下文与3d的上下文
		//  所有的图像绘制都是使用ctx中所包含的属性/方法进行设置的,此时和canvas标签已无关
		var ctx=myCanvas.getContext("2d");
		//设置颜色-fillStyle
		ctx.fillStyle='deepskyblue';
		//绘制矩形-fillRect(x轴坐标,y轴坐标,w宽度,h高度)
		ctx.fillRect(100,100,200,50);
		console.log(ctx);
		</script>
	</body>
</html>

二.Canvas的编程思想

1.canvas的像素化
   -使用canvas进行绘制，一旦绘制成功，canvas就像素化了他们，也就是说才女爱上不能在获取到该图形进行修改，这就是canvas轻量的原因。Flash重的原因之一是flash可以通过对应的api得到该图形的内容来进行再次绘制
   -想要这个canvas图形进行移动，必须按照清屏-更新-渲染的动画思想
   -动画其实就是连续播放的香相关静态画面，我们把每一次绘制的静态画面叫做“二帧”，定时器的间隔叫做帧的间隔

	<body>
	<canvas id="myCanvas" width="300" height="300">本文本仅作为低版本浏览器的提示语</canvas>
	<script>
		var canvas=document.getElementById("myCanvas");
		var ctx=canvas.getContext("2d");//获取canvas的上下文
		ctx.fillStyle="chocolate";      //设置颜色
		ctx.fillRect(left,200,300,300); //绘制矩形
		var left=100;                   //定义水平移动的初始信号量
		setInterval(function(){
			ctx.clearRect(0,0,700,700);//1.清除画布-clearRect(x,，y轴,清除的width,清除的height)
			left++;                    //2.更新信号量
			ctx.fillRect(left,200,300,300);//3.重新渲染绘制
		},10)
	</script>
	</body>

2.，面向对象的canvas动画实现

	<body>
		<canvas id="mycanvas" width="300" height="300"></canvas>
		<script> 
		var canvas=document.getElementById("mycanvas");
		var ctx=canvas.getContext("2d");
		function Rect(x,y,w,h,color){
			this.x=x;
			this.y=y;
			this.w=w;
			this.h=h;
			this.color=color;
		}
		Rect.prototype.update=function(){
			this.x++;
		}
		Rect.prototype.render=function(){
			ctx.fillStyle=this.color;
			ctx.fillRect(this.x,this.y,this.w,this.h);
		}
		//获取实例
		var r1=new Rect(100,100,400,400,"blue");
		setInterval(function(){
			//1.清屏 2.更新 3.再次渲染
			ctx.clearRect(0,0,canvas.width,canvas.height)
			r1.update();
			r1.render();
		},10)
		</script>
	</body>

三.Canvas的基本功能

3.1填充矩形

//设置颜色
ctx.fillStyle='green';
//填充矩形
ctx.fillRect（100,100,100，100）
参数含义:填充坐标x，填充坐标y,矩形的宽度,矩形的高度

3.2绘制矩形边框

ctx.strokeStyle='red';
//绘制矩形
ctx.strokeRect(100,100,100,100)
参数含义:填充坐标x，填充坐标y,矩形的宽度,矩形的高度

3.3清除矩形

ctx.clearRect(0,0,400,400)
参数含义:清除坐标x,清除坐标y,清除的宽度,清除的高度

**

3.4 绘制路径

**

绘制路径是为了设置一个不规则的多边形状态,路径都是闭合的,步骤：
①. 设置路径的起点
②. 使用绘制路径画出起点
③. 封闭路径
④. 填充/绘制已封闭的路径
  --在使用fill（）进行填充路径的内容区域时，
    可以不关闭路,这时会出现自封闭现象（只针对fill）

	<body>
		<canvas id="c1" width="300" height="250" style="border:2px black solid;"></canvas>
		<script>
			var canvas=document.getElementById("c1");
			var ctx=canvas.getContext("2d");
			ctx.beginPath();//1.创建路径
			ctx.moveTo(100,100);//2.设置绘制起点
			ctx.lineTo(150,50);  //描述路径
			ctx.lineTo(200,100);
			ctx.lineTo(175,150);
			ctx.lineTo(125,150);
			ctx.closePath();//3.关闭路径
			//4.绘制不规则矩形边框并设置颜色
			ctx.strokeStyle='black';
			ctx.stroke();
			//5.填充不规则图形
			ctx.fillStyle='coral';
			ctx.fill();
		</script>
	</body>

在这里插入图片描述
3.5 绘制圆弧
在这里插入图片描述

	<body>
		<canvas width="400px" height="400px" id="myCanvas" style="border: 2px black solid;"></canvas>
		<script> 
		var myCanvas=document.getElementById("myCanvas");
		var ctx=myCanvas.getContext("2d");
        ctx.beginPath();
		/*true是逆时针,false是顺时针,Math.PI约等于3.14,
		  一个整圆的的弧度为2*Math.PI,约等于7个弧度
		  如果2个参数的差为7，并且是顺时针方向,则表示绘制一个圆 */
		ctx.arc(200,200,100,0,2*Math.PI,false);	
		ctx.stroke();
		ctx.fillStyle="lightcoral";
		ctx.fill();
		</script>
	</body>

3.5 透明度

//值在0~1之间
ctx.globalAlpha=0.5;

3.6 线型

1.利用lineWidth设置线的粗细,属性值必须是数字,没有单位,默认值为1.0

ctx.lineWidth=20

2.lineCap决定了每一条线段末端的属性,默认为butt,
   三个属性分别为butt,squre,round

ctx.lineCap="round";

3.lineJoin决定了图形中两条线段连接时所显示的样子,
    可选值为:round,bevel,miter

ctx.lineJoin="miter";

4.setLineDash来设置虚线的样式,参数为数组形式
   ([虚线长度,虚线间隔,虚线长度,虚线间隔,...])交替状态

ctx.setLineDash([10,20,30,40,50])

5.lineDashOffset设置虚线的起始偏移量

ctx.lineDashOffset=10;

3.7 绘制文字

ctx.font="20px 微软雅黑";
ctx.textalign="start";//可选值start（默认）,end,left,right,center
ctx.fillText("Canvas绘制文字",100,100);

3.8 线性渐变与径向渐变

线性渐变:

//四个参数表示起点坐标与终点坐标
        var linear=ctx.createLinearGradient(0,0,200,200);
		linear.addColorStop(0.2,"red");
		linear.addColorStop(0.5,"yellow");
		linear.addColorStop(0.7,"blue");
		linear.addColorStop(1,"orange");
		ctx.fillStyle=linear;
		ctx.fillRect(50,50,200,200);

在这里插入图片描述

径向渐变:

在这里插入图片描述

		var radial=ctx.createRadialGradient(100,80,30,110,80,60);
		radial.addColorStop(0,"red");
		radial.addColorStop(0.5,"yellow");
		radial.addColorStop(1,"orange");
		ctx.fillStyle=radial;
		ctx.fillRect(0,0,200,200);

在这里插入图片描述

3.9 阴影

 	<body>
		<canvas id="canvas" width="350" height="100" style="border: 2px black solid;"></canvas>
		<script>
			var canvas=document.getElementById("canvas");
			var ctx=canvas.getContext("2d");
			ctx.shadowOffsetX=10;    //阴影水平方向的偏移量,默认为0
			ctx.shadowOffsetY=20;    //阴影垂直方向的偏移量,默认为0
			ctx.shadowBlur=1;       //描述模糊效果,默认为0,数值越大越模糊
			ctx.shadowColor="red";  //阴影的颜色
			ctx.font="20px 微软雅黑";
			ctx.fillText("迪迦奥特曼登陆bilibili",50,50);
		</script>
	</body>

在这里插入图片描述

3.10 使用图片

		<canvas id="canvas" width="350" height="200" style="border: 2px black solid;"></canvas>
		<script>
			var canvas=document.getElementById("canvas");
			var ctx=canvas.getContext("2d");
	        var img=new Image();          //创建Image对象的实例
			img.src="images/qinshi.jpg";  //引入图片路径
			img.onload=function(){//必须在onload之后渲染图片,
				//四个数值参数为图片的位置与图片的宽高
				ctx.drawImage(img,50,50,200,100);  
			}
			</script>

在这里插入图片描述

-如果有8个参数，则前4个参数表示图片中切片的位置以及宽高
               后4个表示切片在画布中的位置及宽高

		<canvas id="canvas" width="300" height="400" style="border: 2px black solid;"></canvas>
		<script>
			var canvas=document.getElementById("canvas");
			var ctx=canvas.getContext("2d");
	        var img=new Image();          //创建Image对象的实例
			img.src="images/qinshi.jpg";  //引入图片路径
			img.onload=function(){//必须在onload之后渲染图片,
				//四个数值参数为图片的位置与图片的宽高
				// ctx.drawImage(img,50,50,200,100); 
				 ctx.drawImage(img,0,0,170,304,50,50,170,304);
			}
			</script>

在这里插入图片描述

四.资源管理

4.1获取对象中属性的长度

			function dongman(){
				this.dom=document.getElementById("canvas");
				this.ctx=this.dom.getContext("2d");
				this.images={
					"佛之战国":"./images/1.png",
					"秦时明月":"./images/2.png",
					"海贼王":"./images/3.png",
					"鬼谷纵横":"./images/4.png",
					"七武海":"./images/5.png"
				}
				var imgAmount=Object.keys(this.images).length;
				console.log(imgAmount);
			}

在这里插入图片描述

4.2图片加载

		<canvas id="canvas" width="600" height="400"></canvas>
		<script type="text/javascript">
			function dongman(){
				this.dom=document.getElementById("canvas");
				this.ctx=this.dom.getContext("2d");
				this.images={
					"佛之战国":"./images/1.png",
					"秦时明月":"./images/2.png",
					"海贼王":"./images/3.png",
					"鬼谷纵横":"./images/4.png",
					"七武海":"./images/5.png"
				}
				var imgAmount=Object.keys(this.images).length;
				console.log(imgAmount);
				
				var count=1;
				for(k in this.images){
					var src=this.images[k];
					this.images[k]=new Image();
					this.images[k].src=src;
					var self=this;
					this.images[k].onload=function(){
						count++;
						self.ctx.clearRect(0,0,600,400);
						self.ctx.font="18px 微软雅黑";
						self.ctx.fillText("图片加载进度:"+count+" / "+imgAmount,80,80);
						if(count==imgAmount){
							self.start();
						}
					}
				}
			}
			dongman.prototype.start=function(){
				this.ctx.drawImage(this.images["佛之战国"],100,100,300,140);
			}
		</script>

在这里插入图片描述

五.变形

-变形的不是元素,而是画布的渲染区域ctx
-我们需要在画布变形前进行保存与恢复-save()和restore()
  都没有参数,就是保存与恢复所有样式与变形的一个快照

		<canvas id="canvas" width="600" height="400"></canvas>
		<script type="text/javascript">
			function translate(){
				var dom=document.getElementById("canvas");
				var ctx=this.dom.getContext("2d");
				ctx.fillStyle="blue";
				ctx.fillRect(50,50,300,300);
				ctx.save();    //保存默认状态
				
				ctx.fillStyle="green";
				ctx.fillRect(60,60,290,290);
				ctx.save();    //保存当前状态
				
				ctx.fillStyle="red";
				ctx.globalAlpha=0.5;
				ctx.fillRect(70,70,280,280);
				
				ctx.restore();
		</script>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

麦当-咕咚-迪亚
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
canvas常用函数
Iunnamed的博客
04-27 974
canvas常用函数 绘制路径 beginPath(): 开始路径 closePath(): 闭合路径 moveTo(x,y): 移动到某点(开始绘制的起点) lineTo(x,y): 绘制到某点(绘制路径上的一点) stroke(): 连接绘制的起点与途径点形成连线 默认为黑色 fill(): 默认连接起点和最后一个途径点形成闭合图形并填充， 填充色默认为黑 rect(x,y,w,h): 绘制矩形x,y代表矩形位于画布的坐标;w，h为矩形宽高 sav
canvas学习笔记
susuzhe
04-05 469
1、前言 canvas一般就是用来绘制图像的 2、基本知识 上下文对象var canvas = doucment.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "color";// 填充样式 ctx.strokeStyle = "color";//
HTML页面和aso,html canvas
weixin_42319865的博客
06-04 115
canvas ：可以理解为一个div，作用是一块画板如果想要使用canvas，需要创建一个“画家”。生成画家的方法：var huaban = document.queryselector('.canvas');//画板var bicaso = huaban.getcontext('2d');//画家 canvas上下文对象//绘画操作//表示在距离画板左上10px 10px的位置画了一个长宽分别...
canvas 笔记资源 个人学习
01-22
canvas 笔记资源 个人学习
canvas笔记 资源 个人学习
01-22
canvas笔记 资源 个人学习
dom -canvas笔记
08-21
canvas绘制
canvas案例笔记
07-03
canvas基础教程案例笔记 Canvas： 这是画布标签。 ctx： 画笔 在JS中通过元素.getContext("2d") 获取画笔 坐标系： 普通元素有一个定位坐标系 canvas的坐标系叫做绘图坐标系。 ctx可以认为就是坐标系。 坐标系的原点...
Canvas入门教程笔记
03-12
【Canvas入门教程笔记】 Canvas API 是HTML5引入的一项重要特性，允许开发者在网页上动态生成图像，通过JavaScript来实现各种图形的绘制。Canvas是一个二维的画布元素，它本身不包含任何行为，但提供了一个API，使...
HTML2048小游戏（最新版）
最新发布
w11111xxxl的博客
07-17 402
比上一篇文章的2048小游戏更好一点。
高频面试题-HTML
CSDN20221005的博客
07-15 904
离线存储是基于 .appcache ⽂件的缓存机制(不是存储技术)实现的，通过这个⽂件上的解析清单离线存储资源，这些资源就会像 cookie ⼀样被存储了下 来。块级元素有： div p 列表标签(ul ol li dl dt dd) 标题标签(h1 h2 h3 h4) 表格标签(table)空元素： <br> <hr> <img> <input> <link> <meta>->新增了语义化标签(header/footer/nav/asid)->新增了表单增强控件(data/time/email/url)
HTML-VUE页面调用android 客户端网络请求并返回数据
weixin_42504805的博客
07-15 198
确保WebView的设置允许JavaScript接口，并且WebView加载的页面有权限调用这些接口。这样，当用户在Vue页面中点击按钮时，会通过WebView调用Android客户端的网络请求方法，然后将结果回调到Vue页面中显示。在Html-- Vue页面调用Android客户端网络请求并返回数据，通常需要通过WebView与Android客户端的JavaScript接口进行交互。2.在WebView中设置该接口。
JavaWeb---HTML
mmmmazhiyuan的博客
07-14 794
HTML是Hyper Text Markup Language的缩写。意思是超文本标记语言。它的作用是搭建网页结构，在网页上展示内容HTML5 是HyperText Markup Language 5 的缩写，HTML5技术结合了 HTML4.01 的相关标准并革新，符合现代网络发展要求，在 2008 年正式发布。HTML5 由不同的技术构成，其在互联网中得到了非常广泛的应用，提供更多增强网络应用的标准机。与传统的技术相比，HTML5 的语法特征更加明显，并且结合了SVG的内容。
HTML2048小游戏
w11111xxxl的博客
07-17 921
游戏控制方向四个按钮，我就不写样式了 源代码在效果图片后面 是可以正常玩的。
Html_Css问答集(8)
白话魔法师
07-16 812
html与css学习中的一些疑问，问答中轻松获取知识。
如何理解HTML语义化以及它的重要性体现在哪里
2402_84885073的博客
07-14 726
综上所述，HTML语义化对于提升网页的SEO、无障碍访问性、代码可读性可维护性、减少CSS和JavaScript依赖、支持多终端设备的浏览器渲染以及提高网站的专业性和可信度等方面都具有重要意义。因为通过合理的标签选择和结构安排，可以使得网页在没有或较少CSS和JavaScript的情况下也能够呈现出清晰的结构和基本的布局效果。HTML语义化是指使用具有明确含义的HTML标签来构建网页内容的过程，这些标签不仅描述了内容的结构，还传达了内容的含义。这有助于提高网页在搜索引擎中的排名，增加网页的曝光度和流量。
前端开发体系+html文件详解
m0_63432840的博客
07-14 541
target：指定超文本资源路径打开方式 _self(本窗口内打开) _blank(新窗口内打开) _parent(跳出父级窗口) _top（跳出顶级窗口)controls="true"手动控制音频播放，也可换为autoplay（进入网页自动播放）或loop（循环播放）width="500px" height="300px"可改变视频窗口大小但不会改变原视频外框的形状。此时的a标签为为锚点，如果要跳到另一个同目录页面的一个指定位置，在href后加其他页面路径。优先级：行内样式>内部样式=外部样式。
html（抽奖设计）
2301_81704123的博客
07-13 474
可以根据自己的喜好设计抽奖内容，或者修改颜色。
canvas红包雨学习笔记
05-13
<canvas id="canvas"></canvas> ``` ```css #canvas { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 999; } ``` 2. 在JavaScript中获取Canvas画布对象，并设置画布的宽高。 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值