html canvas 绘图,前端canvas生成图片

　　绘制文本

　　在HTML5中，我们还可以在画布上画出我们需要的文本。涉及到的CanvasRenderingContext2D对象的主要属性和方法如下：属性或方法的基本描述font设置用于绘制文本的字体，例如20px宋体，默认值为10px sans-serif。该属性的用法与css字体属性一致，如italic bold 14px/30px Arial，fillStyle用于设置画笔填充路径内部的颜色、渐变和模式。该属性的值可以是表示CSS颜色值的字符串。如果您的绘制要求很复杂，该属性的值也可以是CanvasGradient对象或CanvasPattern对象strokeStyle，用于设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是表示CSS颜色值的字符串。如果您的绘图要求很复杂，该属性的值也可以是CanvasGradient对象或CanvasPattern对象FillText (String Text，Int X，Int Y [，Int MaxWidth])，以从指定的坐标点绘制填充文本。maxWidth参数是可选的。如果文本内容的宽度超过此参数设置，字体将自动缩小以适应宽度。该方法对应的样式设置属性为fillStyle。Stroketext (string text，int x，int y [，int maxwidth])从指定的坐标点绘制未填充的文本(文本内部是空心的)。maxWidth参数是可选的。如果文本内容的宽度超过此参数设置，字体将自动缩小以适应宽度。该方法与fillText()的用法一致，但strokeText()绘制的文本内部未填充(空心)，fillText()绘制的文本内部填充(实心)。该方法对应的样式设置属性为strokeStyle。

　　从上面的API描述信息中，我们可以知道在Canvas中绘制文本有两种方法：一种是使用fillText() fillStyle来绘制填充(实心)文本；一种是使用strokeText() strokeStyle来绘制未填充(空心)的文本。

　　下面，我们先来看看如何使用canvas绘制实心文本。具体的html代码如下：

　　将JavaScript代码内容编码到剪贴板！doctype HTML HTML Head meta charset= UTF-8 Title HTML 5 canvas绘图文本初学者示例/title /head body！-添加带有红色边框的画布标签，以便于在页面上查看-canvas ID= my canvas width= 400 px height= 300 px style= border:1 px solidred；您的浏览器不支持画布标签。/Canvas script type= text/JavaScript //Get Canvas object(Canvas)var Canvas=document . getelementbyid( my Canvas )；//简单检查当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中(CanvasRenderingContext2D获取对应的CanvasRenderingContext2D对象(brush)var CTX=Canvas . Get context( 2d )；//设置字体样式ctx.font= 30pxCourierNew//设置字体填充颜色ctx.fillStyle= blue//从坐标点(50，50)绘制文本ctx.fillText(CodePlayer中文测试，50，50)；} /script /body /html对应的显示效果如下：

　　然后，我们保持其他环境条件不变，使用strokeText() strokeStyle再次绘制上例中的文本。对应的JavaScript代码如下：

　　代码将内容复制到剪贴板script type= text/JavaScript //Get Canvas object(Canvas)var Canvas=document . getelementbyid( my Canvas )；//简单检查当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中(CanvasRenderingContext)如果{//获取对应的CanvasRenderingContext2D对象(brush)var CTX=Canvas . Get context( 2d )；//设置字体样式ctx.font= 30pxCourierNew//设置字体颜色ctx.strokeStyle= blue//从坐标点(50，50)绘制文本ctx.strokeText(CodePlayer中文测试，50，50)；} /script当我们再次使用浏览器访问页面时，会看到如下显示效果(效果图中的 CodePlayer 字样其实是空心的，只是因为字体小所以两边显得重叠):

　　绘制图片在html5中，除了用画布绘制矢量图形，我们还可以在画布上绘制已有的图像文件。

　　首先我们来看看用canvasrenderingcontext 2D对象用Canvas绘制图像文件需要哪些主要的属性和方法：

　　XML/HTML代码将内容复制到剪贴板drawImage(mixedimage，intx，inty)从画布上指定的坐标开始，按照原始大小绘制整个图像。这里的图像可以是Image对象，也可以是Canvas对象(下同)。

　　XML/HTML代码复制内容到剪贴板DrawImage (mixed image，intx，inty，intwidth，intheight)从画布上指定的坐标点开始，以指定的大小(宽度和高度)绘制整个图像，图像会根据指定的大小自动缩放。

　　drawImage(混合图像，int imageX，int imageY，int imageWidth，int imageHeight，int canvasX，int canvasY，int canvasWidth，int canvasHeight)

　　将指定图像的局部图像(以(imageX，imageY)为左上角，imageWidth为宽度，imageHeight为高度的矩形部分)绘制到以(canvasX，canvasY)为左上角坐标，canvasWidth为宽度，canvas height为高度的矩形区域中。

　　是的，你没有看错。要在canvas中绘制图像，我们可以使用名为drawImage()的方法，但该方法有三种不同的变体，每种变体都允许不同数量的参数，甚至参数的不同含义。

　　这里，我们分别举例说明以上三种变体。

　　首先，我们使用drawImage()的第一个变体在画布上绘制Google的logo图像(原始尺寸为550 x 190)。

　　将JavaScript代码内容编码到剪贴板！doctype HTML HTML Head meta charset= UTF-8 Title HTML 5 canvas绘图图像初学者示例/title /head body！-添加带有红色边框的画布标签，以便于在页面上查看-canvas ID= my canvas width= 400 px height= 300 px style= border:1 px solidred；您的浏览器不支持画布标签。/Canvas script type= text/JavaScript //Get Canvas object(Canvas)var Canvas=document . getelementbyid( my Canvas )；//简单检查当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中(CanvasRenderingContext)如果{//获取对应的CanvasRenderingContext2D对象(brush)var CTX=Canvas . Get context( 2d )；//创建新的图片对象varimg=new image()；//指定图片的URL img . src= 3358 www.365mini.com/image/google _ logo . png ；//浏览器加载图片后，绘制图片img.onload=function(){ //以画布上的坐标(10，10)为起点，绘制图像ctx.drawImage(img，10，10)；};} /script /body /html对应的显示效果如下：

　　因为Google的Logo图像太大，超过了画布的大小范围，所以只能显示图像的一部分。此时，我们使用第二个变体将Google的徽标图像缩小到指定的宽度和高度，并将其绘制到画布中。

　　代码将内容复制到剪贴板script type= text/JavaScript //Get Canvas object(Canvas)var Canvas=document . getelementbyid( my Canvas )；//简单检查当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中(CanvasRenderingContext)如果{//获取对应的CanvasRenderingContext2D对象(brush)var CTX=Canvas . Get context( 2d )；//创建新的图片对象varimg=new image()；//指定图片的URL img . src= 3358 www.365mini.com/image/google _ logo . png ；//浏览器加载图像后，绘制图像img.onload=function(){ //以画布上的坐标(10，10)为起点，绘制图像。//图像的宽度和高度缩放到350像素和100像素CTX。DrawImage (img，10，10，350，100)分别；};} /script我们缩放Google的logo图像后，此时可以在画布中看到整个图像：

　　最后，我们使用第三种方法变体将Google logo中‘Goo’部分的图像绘制到画布中(可以使用Photoshop等工具测量‘Goo’部分的图像大小，这里直接使用测量结果)。

　　代码将内容复制到剪贴板script type= text/JavaScript //Get Canvas object(Canvas)var Canvas=document . getelementbyid( my Canvas )；//简单检查当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中(CanvasRenderingContext)如果{//获取对应的CanvasRenderingContext2D对象(brush)var CTX=Canvas . Get context( 2d )；//创建新的图片对象varimg=new image()；//指定图片的URL img . src= 3358 www.365mini.com/image/google _ logo . png ；//在浏览器加载图像后绘制图像。img.onload=function(){ /* *将图像左侧的‘Goo’部分(即图像左上角坐标为(0，0)、宽度为332px、高度为190px的部分)*绘制到坐标为(10， 10)在左上角画一个宽度为332px，高度为190px的矩形区域* *画布目标区域的宽度和高度与捕获的局部图像的大小一致，*表示局部图像将以原始大小捕获，不进行缩放*/ctx.drawimage (img，0，0，332，190，10，10，332，10，332 }； } /script此时，我们可以看到画布中显示的“Goo”的部分图像：

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。