本文摘自PHP中文网,作者大家讲道理,侵删。
canvas(画布)是html5新增的标签元素,用来定义图形,比如图表和其他图像。<canvas>标签只是图形容器,必须使用脚本(通常为javascript)来绘制图形。canvas与svg的区别
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | canvas是HTML5提供的新元素<canvas>,而svg存在的历史要比canvas久远,已经有十几年了。svg并不是html5专有的标签,最初svg是用xml技术(超文本扩展语言,可以自定义标签或属性)描述二维图形的语言。
首先,从它们的功能上来讲,canvas可以看做是一个画布。其绘制出来的图形为标量图,因此,可以在canvas中引入jpg或png这类格式的图片,在实际开发中,大型的网络游戏都是用canvas画布做出来的,并且canvas的技术现在已经相当的成熟。
另外,我们喜欢用canvas来做一些统计用的图表,如柱状图曲线图或饼状图等。而svg,所绘制的图形为矢量图,所以其用法上受到了限制。因为只能绘制矢量图,所以svg中不能引入普通的图片,因为矢量图的不会失真的效果,在项目中我们会用来做一些动态的小图标。
但是由于其本质为矢量图,可以被无限放大而不会失真,这很适合被用来做地图,而百度地图就是用svg技术做出来的。
另外从技术发面来讲canvas里面绘制的图形不能被引擎抓取,如我们要让canvas里面的一个图片跟随鼠标事件:canvas.onmouseover= function (){}。而svg里面的图形可以被引擎抓取,支持事件的绑定。
另外canvas中我们绘制图形通常是通过JavaScript来实现,svg更多的是通过标签来来实现,如在svg中绘制正矩形形就要用<rect>,这里我们不能用属性style= "width:XXX;height:XXX;" 来定义。
我再来介绍一个svg的js库:TWO.JS。其中包含two.js和three.js前者用于绘制二维图形,后者用于绘制三维图形。TWO.JS可以支持三种格式,svg(默认)、canvas、和WEBGL。当然也可以在普通div中引入。
要从同一图形的一个<canvas>标记中移除元素,需要擦掉重新绘制;而svg很容易编辑,只要从其描述中移除元素即可。
以上是之前在别人博客中看到的,所以先引用过来,待之后熟练掌握canvas,svg再写自己的心得体会。
具体请参考
|
|
1 | <br><br><strong><span style= "font-family: 'Microsoft YaHei'; font-size: 14px;" >1、基本语法</span></strong>
|
1 | <canvas id= "canvasMain" width= "800" height= "600" >您的浏览器不支持canvas</canvas>
|
当没有设置宽度和高度的时候,canvas会初始化宽度为300px和高度为150px;当浏览器不支持canvas标签的时候,会显示其中的文字。
在canvas坐标体系中,以左上角为坐标原点,向右为x轴正方向,向下为y轴正方向,如下图:
进行绘制需要获取canvas的上下文环境context,之后调用API进行图像绘制
1 2 | var canvas = document.getElementById( "canvasMain" ),
ctx = canvas.getContext( "2d" );
|
替换内容是在不支持<canvas>标签的浏览器中展示的。也可以通过检测getContext()方法的存在来判断是否支持(有些浏览器会为html规范之外的元素创建默认的html元素对象)
1 2 3 4 5 6 7 | <span style= "color: #000000;" > var canvas = document.getElementById( "canvasMain" );
if (canvas.getContext( "2d" )) {
var ctx = canvas.getContext( "2d" );
} else {
}<br></span>
|
导出在<canvas>元素上绘制的图像,接收一个参数,即图像的MIME类型格式。若绘制到画布上的图像来自不同域,该方法会报错
1 2 3 4 | var canvas = document.getElementById( "canvasMain" ); if (canvas.getContext) {
image.src = imgURI;
document.body.appendChild(image);
}
|
2、2D上下文
填充:用指定的样式(颜色、渐变、图像)填充图形;描边:在图形的边缘画线 两个属性分别是fillStyle strokeStyle,属性的值可以是字符串、渐变对象或模式对象
绘制矩形方法:fillRect() strokeRect() clearRect() 参数依次为:矩形x坐标、y坐标、宽度、高度
1 2 3 4 | var drawing = document.getElementById( 'drawing' ); if (drawing.getContext) { var context = drawing.getContext( '2d' );
context.strokeStyle = 'rgba(0, 0, 255, 0.5)' ;
context.fillRect(30, 30, 50, 50);
context.strokeRect(100, 10, 50, 50);
|
closePath()绘制一条连接到路径起点的线条
fill()填充路径 stroke()描边路径 clip()在路径上创建一个剪切区域
isPointInPath(x,y)判断画布上的某一点是否位于路径上
1 2 3 4 5 6 7 8 | var drawing = document.getElementById( 'drawing' ); if (drawing.getContext) { var context = drawing.getContext( '2d' );
context.strokeStyle = 'pink' ;
context.beginPath();
context.lineTo(100, 25);
context.lineTo(35, 100);
context.moveTo(320, 10);
context.stroke();
}
|
fillText()绘制文本 strokeText()为文本描边 参数:文本字符串、x坐标、y坐标、可选的最大像素宽度
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | var drawing = document.getElementById( 'drawing' ); if (drawing.getContext) {
context.strokeStyle = 'rgba(0, 0, 255, 0.5)' ;
context.beginPath();
context.arc(100, 100, 99, 0, 2*Math.PI, false);
context.moveTo(194, 100);
context.arc(100, 100, 94, 0, 2*Math.PI, false);
context.lineTo(0, -80);
context.lineTo(-65, 0);
context.stroke();
context.rotate(-1);
context.fillStyle = 'rgba(0, 0, 255, 0.5)' ;
context.save();
context.translate(-100, -100);
context.save();
context.fillStyle = 'green' ;
context.fillRect(220, 10, 50, 50);
context.restore();
context.restore();
context.fillRect(340, 10, 50, 50);
}
|
drawImage()还可传入<canvas>元素作为第一个参数,表示把另一个画布内容绘制到当前画布上。
可能遇到的问题:drawImage()图片不显示在画布上,原因可能是你取图片的时候,此时图片还没有加载出来
1 2 3 | window.onload = function (){ var drawing = document.getElementById( 'drawing' ); if (drawing.getContext) {
}
};
|
模式与渐变一样,都是从画布原点(0,0)开始的,将填充样式设置为模式对象,只表示在某个特定区域内显示重复的图像,而不是从某个位置开始绘制重复的图像。
createPattern()第一个参数也可以是<video>元素,或者是另一个<canvas>元素
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | window.onload = function (){ var drawing = document.getElementById( 'drawing' ); if (drawing.getContext) {
context.shadowColor = 'rgba(0, 0, 0, 0.5)' ;
context.fillRect(10, 10, 50, 50);
context.fillStyle = 'pink' ;
context.fillRect(30, 30, 50, 50);
context.fillStyle = gradient;
context.fillRect(100, 10, 50, 50); var createLinearGradient = function (context, x, y, width, height) { return context.createLinearGradient(x, y, x+width, y+height);
}; var gradientNew = createLinearGradient(context, 180, 10, 50, 50);
gradientNew.addColorStop(0, 'red' );
gradientNew.addColorStop(1, 'green' );
context.fillStyle = gradientNew;
context.fillRect(180, 10, 50, 50); var gradientRound = context.createRadialGradient(275, 35, 10, 275, 35, 30);
gradientRound.addColorStop(1, 'blue' );
context.fillStyle = gradientRound;
context.fillRect(250, 10, 50, 50);
pattern = context.createPattern(image, 'repeat-x' );
context.fillRect(350, 10, 350, 350);
}
}
|
getImageData()可取得原始图像数据,参数:要取得数据的画面区域的x坐标、y坐标、宽度、高度。返回的对象是ImageData的实例,该对象有3个属性:width、height和data。其中data为数组,保存着图像中
每一个像素的数据,每一个像素用4个元素来表示,分别表示红、绿、蓝和透明度值。因此,第一个像素的数据保存在数组的第0到第3个元素中。
注意:只有在画布“干净”的情况下(即图像并非来自其他域),才可以取得图像数据。
globalAlpha:介于0和1之间的值(包括0和1),用于指定透明度,默认为0。
globalComositionOperation:表示后绘制的图形怎样与先绘制的图形结合。
3、WebGL
WebGL是针对canvas的3D上下文,并不是由W3C制定的标准。
canvas作为H5一个重要的新特性,大家需要花点精力去学习使用它。
以上就是 canvas基础的学习的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
详细介绍html5 canvas基本绘图之绘制线段代码实例
h5在canvas中实现自定义路径动画
html5和js绘制图片到canvas的方法
canvas实现二维码和图片合成的示例代码
介绍一个用html5 canvas 制作的时钟
html5中globalcompositeoperation属性的详细介绍
html5中如何绘制图形以及清空图像
如何在html5画布中绘制文本图形
如何在canvas里面基于随机点绘制一个多边形
使用html5 canvas封装一个echarts实现不了的饼图
更多相关阅读请进入《canvas》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » canvas基础的学习