从上个星期开始,耳朵就一直在生病,里面长了个疙瘩,肿的一碰就疼,不能吃饭不能嗨 (┳_┳)…… 在此提醒各位小伙伴,最近天气炎热,一定要注意防暑上火,病来如山倒呀~
接下来我正在喝着 5 块一颗的药学习 canvas……
canvas(画布)是 html5 新增的标签元素,用来定义图形,比如图表和其他图像。<canvas> 标签只是图形容器,必须使用脚本(通常为 javascript)来绘制图形。
canvas 与 svg 的区别
|
- 1、基本语法
- <canvas id="canvasMain" width="800" height="600">
- 您的浏览器不支持canvas
- </canvas>
当没有设置宽度和高度的时候,canvas 会初始化宽度为 300px 和高度为 150px;当浏览器不支持 canvas 标签的时候,会显示其中的文字。
在 canvas 坐标体系中,以左上角为坐标原点,向右为 x 轴正方向,向下为 y 轴正方向,如下图:
进行绘制需要获取 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);
- }
2、2D 上下文
填充:用指定的样式(颜色、渐变、图像)填充图形;描边:在图形的边缘画线 两个属性分别是 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() 还可传入
可能遇到的问题: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:表示后绘制的图形怎样与先绘制的图形结合。
3、WebGL
WebGL 是针对 canvas 的 3D 上下文,并不是由 W3C 制定的标准。
本文持续更新中~
来源: http://www.cnblogs.com/merryZhang/p/7055677.html