从上个星期开始,耳朵就一直在生病,里面长了个疙瘩,肿的一碰就疼,不能吃饭不能嗨 (┳_┳)……在此提醒各位小伙伴,最近天气炎热,必定要注意防暑上火,病来如山倒呀~ javascript
接下来我正在喝着5块一颗的药学习canvas……css
canvas(画布)是html5新增的标签元素,用来定义图形,好比图表和其余图像。<canvas>标签只是图形容器,必须使用脚本(一般为javascript)来绘制图形。html
canvas与svg的区别 html5
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再写本身的心得体会。 具体请参考 http://blog.csdn.net/helloword_chen/article/details/49788309 |
一、基本语法
<canvas id="canvasMain" width="800" height="600" > 您的浏览器不支持canvas </canvas>
当没有设置宽度和高度的时候,canvas会初始化宽度为300px和高度为150px;当浏览器不支持canvas标签的时候,会显示其中的文字。java
在canvas坐标体系中,以左上角为坐标原点,向右为x轴正方向,向下为y轴正方向,以下图:canvas
进行绘制须要获取canvas的上下文环境context,以后调用API进行图像绘制数组
var canvas = document.getElementById("canvasMain"),
ctx = canvas.getContext("2d");
替换内容是在不支持<canvas>标签的浏览器中展现的。也能够经过检测getContext()方法的存在来判断是否支持(有些浏览器会为html规范以外的元素建立默认的html元素对象)浏览器
var canvas = document.getElementById("canvasMain");
if(canvas.getContext("2d")) {
var ctx = canvas.getContext("2d");
// drawing code here
} else {
// canvas-unsupported code here
}
导出在<canvas>元素上绘制的图像,接收一个参数,即图像的MIME类型格式。若绘制到画布上的图像来自不一样域,该方法会报错网络
var canvas = document.getElementById("canvasMain"); if(canvas.getContext) { //取得图像的数据URI var imgURI = canvas.toDataURL('image/png'); //显示图像 var image = document.createElement('img'); image.src = imgURI; document.body.appendChild(image); }
二、2D上下文app
填充:用指定的样式(颜色、渐变、图像)填充图形;描边:在图形的边缘画线 两个属性分别是fillStyle strokeStyle,属性的值能够是字符串、渐变对象或模式对象
绘制矩形方法:fillRect() strokeRect() clearRect() 参数依次为:矩形x坐标、y坐标、宽度、高度
var drawing = document.getElementById('drawing'); if(drawing.getContext) { var context = drawing.getContext('2d'); context.strokeStyle = 'rgba(0, 0, 255, 0.5)';//描边属性 context.fillStyle = 'pink';//填充属性 context.lineWidth = 3; //描边线条宽度 context.lineCap = 'square';//线条末端形状(butt平头、round圆头、square方头) context.lineJoin = 'round';//线条相交的方式(round圆交、bevel斜交、miter斜接) context.fillRect(10, 10, 50, 50);//填充矩形 context.fillStyle = 'green'; context.fillRect(30, 30, 50, 50); context.strokeRect(100, 10, 50, 50);//描边矩形 context.clearRect(40, 40, 15, 15);//清除画布上的矩形区域 }
closePath()绘制一条链接到路径起点的线条
fill()填充路径 stroke()描边路径 clip()在路径上建立一个剪切区域
isPointInPath(x,y)判断画布上的某一点是否位于路径上
var drawing = document.getElementById('drawing'); if(drawing.getContext) { /*绘制路径*/ var context = drawing.getContext('2d'); context.strokeStyle = 'pink'; context.beginPath();//开始绘制新路径 //绘制外圆 context.arc(100, 100, 99, 0, 2*Math.PI, false);//参数依次为圆心坐标x、y、半径、起始角度(用弧度表示)、结束角度、起始角度是否按逆时针方向计算(flase为顺时针) context.moveTo(194, 100);//将绘图游标移动到(x,y),不画线 //绘制内圆 context.arc(100, 100, 94, 0, 2*Math.PI, false); //绘制分针 context.moveTo(100, 100); context.lineTo(100, 25);//从上一点开始绘制一条直线,到(x,y)为止 //绘制时针 context.moveTo(100, 100); context.lineTo(35, 100); //绘制文本 context.font = 'bold 14px Arial';//表示文本样式、大小、字体 context.textAlign = 'center';//文本对齐方式(start、end、left、right、center),建议用start、end代替left、right context.textBaseline = 'middle';//文本的基线(top、hanging、middle、alphabetical、ideopgraphic、bottom) context.fillText('12', 100, 20);//参数:文本,文本的坐标 //描边路径 context.stroke(); //额外练习 context.moveTo(230, 10); //arcTo(x1,y1,x2,y2,radius):从上一点开始绘制一条弧线,到(x2,y2)为止,并以给定的半径穿过(x1,y1) context.arcTo(280, 60, 330, 10, 50); //bezierCurveTo(c1x,c1y,c2x,c2y,x,y):从上一点开始绘制一条曲线,到(x,y)为止,并以(c1x,c1y)(c2x,c2y)为控制点 context.bezierCurveTo(210, 70, 290, 90, 300, 100); context.moveTo(320, 10); //quadraticCurveTo(cx,cy,x,y):从上一点开始绘制一条二次曲线,到(x,y)为止,并以(cx,cy)为控制点 context.quadraticCurveTo(420, 100, 400, 10); //rect(x,y,width,height):从点(x,y)开始绘制矩形,此方法绘制的是矩形路径而不是独立的形状 context.rect(450, 10, 50, 50); context.stroke(); }
fillText()绘制文本 strokeText()为文本描边 参数:文本字符串、x坐标、y坐标、可选的最大像素宽度
var drawing = document.getElementById('drawing'); if(drawing.getContext) { //变换 var context = drawing.getContext('2d'); 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.translate(100, 100);//将坐标原点移动到该点 //旋转表针 context.rotate(1);//围绕原点旋转图像angle弧度 //绘制分针 context.moveTo(0, 0); context.lineTo(0, -80); //绘制时针 context.moveTo(0, 0); context.lineTo(-65, 0); context.stroke(); context.rotate(-1); context.fillStyle = 'rgba(0, 0, 255, 0.5)'; context.save();//保存上下文状态,只保存绘图上下文的设置和变换,不会保存绘图上下文的内容 context.fillStyle = 'pink'; context.translate(-100, -100); context.save(); context.fillStyle = 'green'; context.fillRect(220, 10, 50, 50); context.restore();//返回以前保存的设置 context.fillRect(280, 10, 50, 50); context.restore(); context.fillRect(340, 10, 50, 50); }
drawImage()还可传入<canvas>元素做为第一个参数,表示把另外一个画布内容绘制到当前画布上。
可能遇到的问题:drawImage()图片不显示在画布上,缘由多是你取图片的时候,此时图片尚未加载出来
window.onload = function(){ var drawing = document.getElementById('drawing'); if(drawing.getContext) { //图像 var context = drawing.getContext('2d'); var image = document.images[0]; //参数依次表示为:图像元素、源图像x坐标、y坐标、目标的宽度、高度 context.drawImage(image, 0, 0, 150, 250); //参数依次表示为:图像元素、源图像x坐标、y坐标、源图像宽度、高度、目标图像x坐标、y坐标、目标图像宽度、高度 context.drawImage(image, 100, 300, 500, 600, 0, 0, 70, 80); } };
模式与渐变同样,都是从画布原点(0,0)开始的,将填充样式设置为模式对象,只表示在某个特定区域内显示重复的图像,而不是从某个位置开始绘制重复的图像。
createPattern()第一个参数也能够是<video>元素,或者是另外一个<canvas>元素
window.onload = function(){ var drawing = document.getElementById('drawing'); if(drawing.getContext) { //阴影 var context = drawing.getContext('2d'); context.shadowColor = 'rgba(0, 0, 0, 0.5)';//阴影颜色,默认黑色 context.shadowOffsetX = 5;//x轴方向的阴影偏移量,默认0 context.shadowOffsetY = 5;//y轴方向的阴影偏移量,默认0 context.shadowBlur = 4;//模糊的像素数,默认0 context.fillStyle = 'rgba(0, 0, 255, 0.5)'; context.fillRect(10, 10, 50, 50); context.fillStyle = 'pink'; context.fillRect(30, 30, 50, 50); //渐变 var gradient = context.createLinearGradient(100, 10, 130, 130);//建立线性渐变,返回CanvasGradient对象的实例。参数:起点x坐标、y坐标、终点x坐标、y坐标 gradient.addColorStop(0, 'white');//指定色标,参数:色标位置(0到1之间的数字,0表示开始的颜色,1为结束的颜色)、css颜色值 gradient.addColorStop(1, 'black'); 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(0, 'pink'); gradientRound.addColorStop(1, 'blue'); context.fillStyle = gradientRound; context.fillRect(250, 10, 50, 50); //模式,即重复的图像,能够用来填充或描边图形 var image = document.images[0], pattern = context.createPattern(image, 'repeat-x');//建立新模式,参数:图像元素、是否重复(repeat、repeat-x、repeat-y、no-repeat) context.fillStyle = pattern; 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:表示后绘制的图形怎样与先绘制的图形结合。
三、WebGL
WebGL是针对canvas的3D上下文,并非由W3C制定的标准。
本文持续更新中~