HTML5画布介绍

是HTML5中的一个新元素，可以用来绘制图形、制作照片、制作动画。标签只是一个图形容器，它没有自己的行为，必须使用脚本来绘制图形。创建一个画布标签只有两个属性——宽度和高度。未设置宽高时，的默认大小为300pxx150px。请注意，如果您使用css定义的大小，则图像将在绘制时拉伸以适合其框架大小：如果CSS大小与初始画布的比例不匹配，则会出现扭曲。呈现上下文元素本身没有绘图功能。所有绘图工作都必须在JavaScript中完成。创建一个固定大小的画布，它公开一个或多个渲染上下文，可用于绘制和处理要显示的内容。画布最初是空白的，我们首先需要找到一个渲染上下文，然后在上面绘制。varcanvas=document.getElementById("mycanvas");varctx=canvas.getContext('2d');有一个名为getContext()的方法，用于获取渲染上下文及其绘制函数。getContext()只有一个参数，就是上下文的格式。检查浏览器兼容性最新版本的FireFox、Safari、Chrome和Opera均支持HTML5canvas，但IE8及以下不支持canvas。以下代码用于检测浏览器是否支持canvasvarcanvas=document.getElementById('mycanvas');如果(canvas.getContext){varctx=canvas.getContext('2d');//绘制代码在这里}else{//canvas-unsupportedcodehere}canvascoordinates在绘制图形之前，我们首先要了解canvas中的坐标。默认情况下，画布被网格覆盖。一般来说，网格中的一个单元格相当于画布元素中的一个像素。网格的起点是左上角（坐标（0,0））。所有元素都相对于原点定位。绘制canvas图形OK，接下来我们就开始了解如何使用CanvasAPI绘制基本图形。varcanvas=document.getElementById('mycanvas');如果(canvas.getContext){varctx=canvas.getContext('2d');ctx.fillStyle="红色";ctx.fillRect(0,0,100,100);}上面两行代码画了一个红色矩形：设置fillStyle属性，可以是css颜色，渐变，或者图案。fillStyle的默认设置是#000000（黑色）。fillRect(x,y,width,height)方法定义了当前矩形的填充方式，x和y指定了绘制在画布上的矩形的左上角（相对于原点）的坐标。width和height设置矩形的尺寸。画布路径路径是由线段或曲线连接的不同形状的点的集合。一条路径，甚至一条子路径，都是封闭的。绘制带有路径的形状需要一些额外的步骤。下面是要用到的方法：函数说明strokeStyle用于设置画笔绘制路径的颜色、渐变和模式lineWidth定义绘制线条的宽度beginPath()开始一条新的绘制路径moveTo(x,y)moves画刷到指定坐标点(x,y)，这是新子路径的起点lineTo(x,y)用直线连接当前终点和指定坐标点(x,y)stroke()沿绘制路径的坐标点序列绘制一条直线closePath()如果当前绘制路径是打开的，则关闭绘制路径。这里需要注意的是，当你调用fill()函数时，所有未闭合的形状都会自动闭合，所以你不需要调用closePath()函数。但是调用stroke()时不会自动关闭。以下代码绘制一个三角形：functiondraw(){varcanvas=document.getElementById('canvas');如果(canvas.getContext){varctx=canvas.getContext('2d');ctx.beginPath();ctx.moveTo(75,50);ctx.lineTo(100,75);ctx.lineTo(100,25);ctx.填充();}}canvas弧形绘制路径我们可以使用arc()方法。该方法有六个参数：x、y为绘制圆弧的圆心坐标。半径是半径。startAngle和endAngle参数以弧度定义开始和结束弧。这些都是相对于x轴的。参数anticlockwise是一个布尔值。当为真时，它是逆时针的，否则是顺时针的。varcanvas=document.getElementById("mycanvas");varctx=canvas.getContext("2d");ctx.beginPath();ctx.arc(95,50,40,0,2*Math.PI);ctx。中风（）;注意：arc()函数中的角度单位是弧度，不是度数。角度和弧度的js表达式：弧度=(Math.PI/180)*度。canvastextcanvas提供了两种渲染文本的方法：fillText(text,x,y[,maxWidth])在指定的(x,y)位置填充指定的文本，绘制的最大宽度可选。strokeText(text,x,y[,maxWidth])在指定的(x,y)位置绘制文本边框，绘制的最大宽度可选。文字填充方式：varcanvas=document.getElementById("mycanvas");varctx=canvas.getContext("2d");ctx.font="30pxArial";ctx.fillText("HelloWorld",10,50);文字边框绘制方法：varcanvas=document.getElementById("mycanvas");varctx=canvas.getContext("2d");ctx.font="30pxArial";ctx.strkeText("HelloWorld",10,50);画布图像将图像导入画布需要以下两个基本操作：获取指向HTMLImageElement的对象或对另一个画布元素的引用作为源，或者提供URL以使用图像。使用drawImage()函数将图像绘制到画布上。获取图片和绘制图片，下面只展示最简单的：varcanvas=document.getElementById("mycanvas");varctx=canvas.getContext("2d");varimg=document.getElementById("img");ctx.drawImage(img,10,10);drawImage有三个参数：drawImage(image,x,y)。其中image是图像或画布对象，x和y是它在目标画布中的起始坐标。