搜索
首页后端开发php教程html中canvas有什么用?

html中canvas有什么用?

Jun 13, 2016 am 11:56 AM
canvashtml

html中canvas有什么用?

在HTML5中5ba626b379994d53f7acf72a64f9b697元素可以为你提供一种使用 JavaScript来绘制图形的简单而强大的方法。它可以用于绘制图形,合成制作照片或做简单(而不是那么简单)的动画。

5ba626b379994d53f7acf72a64f9b697是一个简单的元素,它只有两个特定属性“width”和“height”以及所有核心HTML5属性,如id,name和class等。

<canvas id = "mycanvas" width = "100" height = "100"></canvas>

你可以使用getElementById()方法在DOM中轻松找到5ba626b379994d53f7acf72a64f9b697元素,如下所示:

var canvas = document.getElementById("mycanvas");

HTML5中Canvas元素的使用总结

Canvas提供了开发者自定义绘图的接口,我们可以使用getContext()函数来获取绘图上下文进行绘制操作,这个函数中可以传入两个参数,其中第1个参数设置绘图上下文的类型,比较常用的是"2d",我们也可以使用"webgl"来使用webOpenGL实现3D绘制。本篇博客主要总结2d绘制的相关方法。

1.进行简单的图形绘制

使用Canvas进行平面图形绘制比较简单。例如使用如下函数则可以直接绘制一个矩形区域。

		var c = document.getElementById("canvas");
		var context = c.getContext("2d");
		context.strokeRect(20,20,100,100);

图形效果如下:

与strokeRect对应,使用fillRect可以绘制填充矩形,例如:

		var c = document.getElementById("canvas");
		var context = c.getContext("2d");
		context.fillRect(20,20,100,100);

效果如下:

使用clearRect函数可以进行矩形区域的擦除,示例如下:

		var c = document.getElementById("canvas");
		var context = c.getContext("2d");
		context.strokeRect(20,20,100,100);
		context.clearRect(10,10,100,100);

效果如下图:

上面的绘制图形的方法实际上是一个复合的函数,其完成了路径的定义和绘制两步。我们也可以自定义图形路径,例如:

		var c = document.getElementById("canvas");
		var context = c.getContext("2d");
		context.beginPath();
		context.moveTo(20,20);
		context.lineTo(20,100);
		context.lineTo(100,100);
		context.closePath();
		context.stroke();

效果如下:

beginPath函数用来开启一个路径,moveTo函数用于将画笔移动到某个点,lineTo函数用来定义一条线,线的起点为当前画笔所在位置,参数为终点位置。closePath函数用来关闭路径,当然,此函数并非一定要调用,如果不调用可以绘制非闭合的图形。stroke函数用来将已经定义的图形进行绘制,与其对应还有一个fill函数用来进行填充绘制。

quadraticCurveTo与bezierCurveTo两个函数分别用来创建二次与三次贝塞尔曲线路径,示例如下:

		context.moveTo(20,120);
		context.quadraticCurveTo(20,200,100,180);
		context.stroke();
		context.moveTo(20,200);
		context.bezierCurveTo(20,300,60,300,60,200);
		context.stroke();

效果如下图:

关于贝塞尔曲线的相关内容,可以查阅下面的博客:

https://my.oschina.net/u/2340880/blog/1519503。

arc函数用来创建圆形弧线,例如:

        context.moveTo(110,350);
		context.arc(60,350,50,0,2*Math.PI,false);
		context.stroke();

arc函数中,前两个个参数设置圆心点,第3个参数设置半径,第4个和第5个参数设置圆弧的起始点和结束点,以弧度制表示,最后一个参数为布尔值,设置是否逆向绘制。还有一个arcTo函数用来绘制两条切线间的圆弧,如下:

		context.moveTo(20,420);
		context.arcTo(80,420,80,600,50);
		context.stroke();

效果如下图所示:

使用clip函数可以进行裁剪操作,裁剪之后,之后的绘制只能绘制在裁剪的区域内,例如:

		context.rect(0,500,100,30);
		context.clip();
		context.fillRect(0,500,200,200);

效果如下:

有一点需要注意,使用clip函数进行裁剪后,之后的绘制将只能在裁剪的区域内进行绘制,如果想在裁剪区域外绘制,需要使用save和restore两个函数来处理,在裁剪前,使用save函数来保存当前绘图上下文的状态,想要在裁剪区域外绘制时使用restore函数来还原绘图上下文。

2.绘制文本和图像

前面示例了使用Canvas进行图形的绘制,除了图形,使用Canvas也可以轻松的绘制出图像与文本。使用drawImage函数进行图像的绘制,如下:

        var image = document.createElement("img");
		image.src = &#39;img/HBuilder.png&#39;;
		image.onload = function(){
				context.drawImage(image,0,600);
		}

需要注意,上面创建了img元素后,设置src属性后不能立刻进行渲染,因为图片的加载是需要时间的,直接渲染会无法获取图像数据。drawImage这个函数总共可以有8个参数,drawImage(img,sx,sy,sw,sh,x,y,w,h)。其中sx,sy和sw,sh用来对原图像进行裁剪,只选择图像中的部分进行绘制,x,y,w,h设置绘制在画布上的坐标和尺寸。

关于文本绘制,可以使用fillText或strokeText函数,分别用来绘制实心和空心文字。示例如下:

        context.font = "20px Georgia";//设置字体
 		context.textAlign = &#39;start&#39;;  //设置文字对齐方式
		context.fillText("Hello World",0,750,200);
		context.strokeText("Hello World",0,800,200);

效果如下:

3.绘制属性的设置

    在绘制过程中,开发者可以对绘制的线条颜色,填充颜色,风格,阴影等进行设置。示例如下:

		context.fillStyle = &#39;red&#39;;  //设置填充颜色
		context.strokeStyle = &#39;blue&#39;; //设置线条颜色
		context.shadowColor = &#39;green&#39;; //设置阴影颜色
		context.shadowBlur = 10;   //设置阴影模糊度
		context.shadowOffsetX = 10; //设置阴影X轴偏移量
		context.shadowOffsetY = 5;  //设置阴影Y轴偏移量
		context.lineCap = &#39;round&#39;;  //设置线帽样式
		context.lineJoin = &#39;round&#39;; //设置折点样式
		context.lineWidth = 1; //设置线条宽度

效果如下图:

关于fillStyle和strokeStyle两个属性比较特殊,从名字也可以了解其是设置填充或线条的风格,设置颜色只是一种方式,其还可以设置为一个渐变对象,用来实现渐变效果。例如:

		var g = context.createLinearGradient(0,750,200,750);
		g.addColorStop(0,&#39;black&#39;);
		g.addColorStop(0.5,&#39;red&#39;);
		context.fillStyle =  g;
		context.fillText("Hello World",0,750,200);

效果入下图:

createLinearGradient函数用来创建线性渐变层,其中4个参数设置起始点的x,y和结束点的x,y。调用addColorStop函数用来想渐变层中添加临界点和颜色值。也可以创建发散型渐变,例如:

        var g = context.createRadialGradient(70,800,20,70,800,50);
		g.addColorStop(0,&#39;black&#39;);
		g.addColorStop(1,&#39;red&#39;);
		context.fillStyle =  g;
		context.fillRect(20,750,100,100);

效果如下:

createRadiaGradient函数的前3个参数设置渐变开始处的圆弧(分别设置圆心x,y坐标和半径),后3个参数设置渐变结束处的圆弧(分别设置圆心x,y坐标和半径)。

    fillStyle和strokeStyle也可以设置为一个模式背景,例如将图片进行重复得到的背景,示例如下:

        image.onload = function(){
			var p = context.createPattern(image,&#39;repeat&#39;);
		    context.fillStyle =  p;
			context.fillRect(20,750,200,200);
		}

效果如下图所示:

可选的重复模式还有:

repeat-x:只在水平方向重复。

repeat-y:只在竖直方向重复。

no-repeat:不重复,只显示一次。

4.进行画布转换

    画布也可以进行一些简单的变换操作,例如旋转,缩放等等。需要注意,对画布的操作不会影响到已经绘制到画布上的内容,之后绘制的内容会受到影响。使用scale(x,y)函数可以对画布进行缩放,其中两个参数x和y分别设置水平和竖直方向的缩放比例。rotate(angle)函数用来对画布进行旋转,其中的参数为旋转的角度值。translate(x,y)函数用来对画布进行平移,参数x,y分别设置水平和竖直方向的平移量。还有一个复合的transform(a,b,c,d,e,f)函数,使用这个函数可以一步设置平移,旋转和缩放属性,参数意义如下:

a:设置水平缩放比

b:设置水平倾斜

c:设置垂直倾斜

d:设置垂直缩放比

e:设置水平平移

f:设置垂直平移

需要注意,如果你多次调用transform,每次的transform变换都将在上一次的基础上进行。如果你不想保留上一次的记录,可以调用setTransform()函数来重置设置。

更多相关知识,请访问 PHP中文网!!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
解释负载平衡如何影响会话管理以及如何解决。解释负载平衡如何影响会话管理以及如何解决。Apr 29, 2025 am 12:42 AM

负载均衡会影响会话管理,但可以通过会话复制、会话粘性和集中式会话存储解决。1.会话复制在服务器间复制会话数据。2.会话粘性将用户请求定向到同一服务器。3.集中式会话存储使用独立服务器如Redis存储会话数据,确保数据共享。

说明会话锁定的概念。说明会话锁定的概念。Apr 29, 2025 am 12:39 AM

Sessionlockingisatechniqueusedtoensureauser'ssessionremainsexclusivetooneuseratatime.Itiscrucialforpreventingdatacorruptionandsecuritybreachesinmulti-userapplications.Sessionlockingisimplementedusingserver-sidelockingmechanisms,suchasReentrantLockinJ

有其他PHP会议的选择吗?有其他PHP会议的选择吗?Apr 29, 2025 am 12:36 AM

PHP会话的替代方案包括Cookies、Token-basedAuthentication、Database-basedSessions和Redis/Memcached。1.Cookies通过在客户端存储数据来管理会话,简单但安全性低。2.Token-basedAuthentication使用令牌验证用户,安全性高但需额外逻辑。3.Database-basedSessions将数据存储在数据库中,扩展性好但可能影响性能。4.Redis/Memcached使用分布式缓存提高性能和扩展性,但需额外配

在PHP的上下文中定义'会话劫持”一词。在PHP的上下文中定义'会话劫持”一词。Apr 29, 2025 am 12:33 AM

Sessionhijacking是指攻击者通过获取用户的sessionID来冒充用户。防范方法包括:1)使用HTTPS加密通信;2)验证sessionID的来源;3)使用安全的sessionID生成算法;4)定期更新sessionID。

PHP的完整形式是什么?PHP的完整形式是什么?Apr 28, 2025 pm 04:58 PM

文章讨论了PHP,详细介绍了其完整形式,在We​​b开发中的主要用途,与Python和Java的比较以及对初学者的学习便利性。

PHP如何处理形式数据?PHP如何处理形式数据?Apr 28, 2025 pm 04:57 PM

PHP使用$ \ _ post和$ \ _获取超级全局的php处理数据,并通过验证,消毒和安全数据库交互确保安全性。

PHP和ASP.NET有什么区别?PHP和ASP.NET有什么区别?Apr 28, 2025 pm 04:56 PM

本文比较了PHP和ASP.NET,重点是它们对大规模Web应用程序,性能差异和安全功能的适用性。两者对于大型项目都是可行的,但是PHP是开源和无关的,而ASP.NET,

PHP是对病例敏感的语言吗?PHP是对病例敏感的语言吗?Apr 28, 2025 pm 04:55 PM

PHP的情况敏感性各不相同:功能不敏感,而变量和类是敏感的。最佳实践包括一致的命名和使用对案例不敏感的功能进行比较。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。