所属分类：web前端开发
canvas与svg的区别
|
微博登录
QQ登录
1、基本语法
登录后复制<canvas id="canvasMain" width="800" height="600" >您的浏览器不支持canvas</canvas>
登录后复制当没有设置宽度和高度的时候，canvas会初始化宽度为300px和高度为150px；当浏览器不支持canvas标签的时候，会显示其中的文字。
在canvas坐标体系中，以左上角为坐标原点，向右为x轴正方向，向下为y轴正方向，如下图：
前端（vue）入门到精通课程：进入学习
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具：点击使用
进行绘制需要获取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) {//取得图像的数据URIvar 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、rightcontext.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轴方向的阴影偏移量，默认0context.shadowOffsetY = 5;//y轴方向的阴影偏移量，默认0context.shadowBlur = 4;//模糊的像素数，默认0context.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制定的标准。
canvas作为H5一个重要的新特性，大家需要花点精力去学习使用它。
以上就是 canvas基础的学习的详细内容，更多请关注zzsucai.com其它相关文章！
