HTML5Canvas

canvas元素用于在网页上绘制图形。什么是画布？HTML5元素用于绘制图形，这是通过脚本（通常是JavaScript）完成的。标签只是一个图形容器，必须使用脚本来绘制图形。您可以使用画布以多种方式绘制路径、框、圆、字符和添加图像。浏览器支持表中的数字表示第一个支持元素的浏览器的版本号。创建画布（Canvas）画布是网页中的一个矩形框，通过元素绘制。注意：默认情况下，元素没有边框和内容。的一个简单例子如下：注意：标签通常需要指定一个id属性（脚本中经常引用），width和height属性定义画布的大小。提示：您可以在HTML页面中使用多个元素。使用style属性添加边框：canvasid="myCanvas"width="200"height="100"style="border:1pxsolid#000000;">效果展示：使用JavaScript来绘制图像。canvas元素本身没有绘图能力。所有绘图工作必须在JavaScript中完成：HTML代码：您的浏览器不支持HTML5画布标签。javascript代码：varc=document.getElementById("myCanvas");varctx=c.getContext("2d");ctx.fillStyle="#FF0000";ctx.fillRect(0,0,150,75);效果展示：实例分析：首先找到元素：varc=document.getElementById("myCanvas");然后，创建上下文对象：varctx=c.getContext("2d");getContext("2d")对象是一个内置的HTML5对象，具有绘制路径、矩形、圆形、字符和添加图像的各种方法。下面两行代码绘制一个红色矩形：ctx.fillStyle="#FF0000";ctx.fillRect(0,0,150,75);设置fillStyle属性可以是CSS颜色、渐变或图案。fillStyle的默认设置是#000000（黑色）。fillRect(x,y,width,height)方法定义矩形当前的填充方式。画布坐标画布是一个二维网格。画布左上角的坐标为（0,0），上面的fillRect方法有参数（0,0,150,75）。含义：在画布上画一个150×75的矩形，从左上角的(0,0)开始。坐标示例如下图所示，画布的X和Y坐标用于定位画在画布上的位置。定位坐标显示在鼠标移动的矩形框内。Canvas路径要在Canvas上画一条线，我们将使用以下两种方法："方法，如stroke()。示例：定义起始坐标（0,0）和结束坐标（200,100）。然后使用stroke()方法画线：HTML代码：您的浏览器不支持HTML5canvas标签。javascript代码：varc=document.getElementById("myCanvas");varctx=c.getContext("2d");ctx.moveTo(0,0);ctx.lineTo(200,100);ctx.stroke();效果展示：在画布上画一个圆，我们会用到下面的javascript方法：context.arc(x,y,r,sAngle,eAngle,逆时针);参数值定义和使用arc()方法创建圆弧/曲线（用于创建圆或部分圆）。提示：要使用arc()创建圆，请将起始角度设置为0，结束角度设置为2*Math.PI。提示：请使用stroke()或fill()方法在画布上绘制实际的弧线。中心：arc(100,75,50,0Math.PI,1.5Math.PI)起始角：arc(100,75,50,0,1.5*Math.PI)结束角：arc(100,75,50,0Math.PI,1.5Math.PI)其实我们在画圆的时候用的是“墨”的方法，比如stroke()或者fill()。示例使用arc()方法绘制圆：HTML代码：您的浏览器不支持HTML5画布标签。javascript代码：varc=document.getElementById("myCanvas");varctx=c.getContext("2d");ctx.beginPath();ctx.arc(95,50,40,0,2*Math.PI);ctx.stroke();效果展示：canvas-text使用画布绘制文字，重要的属性和方法如下：font-definefontfillText(text,x,y,maxWidth)-在画布上绘制实心文字strokeText(text,x,y,maxWidth)-在画布上绘制空心文字参数值使用fillText():示例使用“宋体”字体绘制高度为画布上的30像素（纯色）：HTML代码：您的浏览器不支持HTML5canvas标签。javascript代码：varc=document.getElementById("myCanvas");varctx=c.getContext("2d");ctx.font="30pxArial";ctx.fillText("HelloWorld",10,50);效果展示：使用strokeText():Example使用“Arial”字体在画布上绘制一个高度为30px的文字（空心）：HTML代码：您的浏览器不支持HTML5canvas标签。javascript代码：varc=document.getElementById("myCanvas");varctx=c.getContext("2d");ctx.font="30pxArial";ctx.strokeText("HelloWorld",10,50);效果展示：Canvas-gradient渐变可以填充矩形、圆形、线条、文字等，各种形状可以自己定义不同的颜色。有两种不同的方法来设置Canvas渐变：createLinearGradient()方法创建一个线性渐变对象。提示：使用addColorStop()方法指定不同的颜色以及它们在渐变对象中的位置。addColorStop()方法指定渐变对象中的颜色和位置。addColorStop()方法与createLinearGradient()或createRadialGradient()一起使用。注意：您可以多次调用addColorStop()方法来更改渐变。如果不在渐变对象上使用此方法，则渐变将不可见。为了获得可见的渐变，您需要创建至少一个色标。JavaScript语法：gradient.addColorStop(stop,color);stop介于0.0和1.0之间的值，表示渐变开始和结束之间的位置。color停止位置显示的CSS颜色值。javascript语法createLinearGradient(x,y,x1,y1)参数值createLinearGradient()方法创建一个径向/圆形渐变对象。JavaScript语法：createRadialGradient(x0,y0,r0,x1,y1,r1);参数值实例使??用createLinearGradient()创建线性渐变。用渐变填充矩形：javascript代码：varc=document.getElementById("myCanvas");varctx=c.getContext("2d");//创建渐变vargrd=ctx.createLinearGradient(0,0,200,0);grd.addColorStop(0,"red");grd.addColorStop(1,"white");//渐变填充ctx.fillStyle=grd;ctx.fillRect(10,10,150,80);效果显示：示例使用createRadialGradient()创建径向/圆形渐变。用渐变填充矩形：javascript代码：varc=document.getElementById("myCanvas");varctx=c.getContext("2d");//创建渐变vargrd=ctx.createRadialGradient(75,50,5,90,60,100);grd.addColorStop(0,"red");grd.addColorStop(1,"white");//渐变填充ctx.fillStyle=grd;ctx.fillRect(10,10,150,80);效果展示：画布图片在画布上放置一张图片，使用如下方法：drawImage(image,x,y)HTML代码：

要使用的图片：

Canvas: