使用canvas绘制图形,下面哪个方法可以绘制矩形?,canvas绘制圆角矩形

　　使用closePath()闭合图形首先我们用最普通的方法画一个长方形。

　　将JavaScript代码内容编码到剪贴板！doctype html html lang= en head meta charset= UTF-8 title/title/head body！doctype HTML HTML lang= zh headmethacharaset= UTF-8 title Draw rectangle/title/headbydivid= canvas-warp canvas id= canvas style= border:1 px solid # aaaaaa；显示：块； margin:50px auto；你的浏览器不支持Canvas？赶紧换！/canvas /div脚本window . onload=function(){ var canvas=document . getelementbyid( canvas )；canvas.width=800canvas.height=600var context=canvas . get context( 2d )；context . begin path()；context.moveTo(150，50)；context.lineTo(650，50)；context.lineTo(650，550)；context.lineTo(150，550)；context.lineTo(150，50)；//画最后一笔关闭图像上下文. line width=5；context.strokeStyle= blackcontext . stroke()；}/script/body/html/body/html运行结果：

　　乍一看没什么问题，但是视力好的童鞋已经找到了。最后一笔收的时候出了问题，导致左上角有缺口。这种情况是由于设置线宽造成的。如果默认为1笔，就没有问题。但是笔触越大，线条越宽，这种差距就越明显。那么如何避免这种情况呢？

　　题目已经打出来了。使用clothPath()关闭图形。

　　将JavaScript代码内容编码到剪贴板！doctype HTML HTML lang= zh headmethacharaset= UTF-8 title Draw rectangle/title/headbydivid= canvas-warp canvas id= canvas style= border:1 px solid # aaaaaa；显示：块； margin:50px auto；你的浏览器不支持Canvas？赶紧换！/canvas /div脚本window . onload=function(){ var canvas=document . getelementbyid( canvas )；canvas.width=800canvas.height=600var context=canvas . get context( 2d )；context . begin path()；context.moveTo(150，50)；context.lineTo(650，50)；context.lineTo(650，550)；context.lineTo(150，550)；context.lineTo(150，50)；//最后一笔不能画context . close path()；//使用closePath()关闭图形上下文，line width=5；context.strokeStyle= blackcontext . stroke()；}/script/body/html/body/html运行结果：

　　结合这个例子和上节课的讲解，我们知道在绘制路径的时候，需要用beginPath()和closePath()将规划好的路径包裹起来。当然也可以不用画最后一笔直接用closePath()，它会自动帮你关闭。(所以不想画封闭图就不能用close path())

　　给矩形上色这里我们要介绍一个和stroke()一样重要的方法fill()。就像原始笔画一样，在填充颜色之前，我们必须使用fillStyle属性来选择要填充的颜色。

　　例如，如果我们想把上面的矩形涂成黄色，我们可以这样写。

　　将JavaScript代码内容编码到剪贴板！doctype HTML HTML lang= zh headmethacharaset= UTF-8 title Draw rectangle/title/headbydivid= canvas-warp canvas id= canvas style= border:1 px solid # aaaaaa；显示：块； margin:50px auto；你的浏览器不支持Canvas？赶紧换！/canvas /div脚本window . onload=function(){ var canvas=document . getelementbyid( canvas )；canvas.width=800canvas.height=600var context=canvas . get context( 2d )；context . begin path()；context.moveTo(150，50)；context.lineTo(650，50)；context.lineTo(650，550)；context.lineTo(150，550)；context.lineTo(150，50)；//最后一笔不能画context . close path()；//使用closePath()关闭图形上下文，fill style= yellow ；//选择油漆桶context.lineWidth=5的颜色；context.strokeStyle= blackcontext . fill()；//确保填充context . stroke()；}/script/body/html/body/html运行结果：

　　这里需要注意的是一个好的编码标准。因为之前已经说过Canvas是基于状态的渲染，只有在调用stroke()和fill()时才确定渲染。所以我们要把这两行代码放在最后，剩下的状态设置代码放在前面，把状态设置和决定画图的代码分开。增强代码的可读性。

　　封装绘制方法你一定发现了，画矩形其实就是这样的四笔。我们每次用这种笨方法画矩形都要画这四个笔画有多麻烦？如果我们要花10个长方形？100?1000?如果都这样写，代码会臃肿，复用性低。在这里，我们可以使用JavaScript封装这些方法。我们知道，一个矩形可以由它的左上角坐标和它的长和宽唯一确定。

　　函数JavaScript

　　这里介绍一下JavaScript函数。如果有基本功的同学可以跳过这一大段，只看后面。

　　和JavaScript ActionScript语言的函数声明调用一样，是编程语言中最简单的。

　　的功能

　　函数，您可以编写一次代码，然后重复使用代码。比如我们要完成多组数和的函数。

　　代码将内容复制到剪贴板varsumsum=3 ^ 2；警报(总和)；sum=7 8；警报(总和)；//一直重复两行代码。如果要实现八组数的和，需要16行代码。实现得越多，代码行就越多。所以我们可以把完成特定功能的代码块放到一个函数中，直接调用这个函数，省去了重复输入大量代码的麻烦。

　　使用功能完成：

　　代码将内容复制到剪贴板functionadd2(a，b){ sum=a b；警报(总和)；}//只写一次就可以加2(3，2)；add2(7，8)；//直接调用函数来定义函数。

　　如何定义一个函数？请看下面的格式：

　　代码将内容复制到剪贴板函数函数名(){函数体；}函数定义函数的关键字。“函数名”是你给函数起的名字，“函数体”是用完成特定函数的代码代替的。

　　函数调用

　　函数定义后，不能自动执行。你需要调用它，直接在需要的位置写函数名。一般有两种方式：

　　第一种情况：在脚本标记内调用。

　　代码将内容复制到剪贴板脚本functiontcon() {alert(祝贺您学习函数调用！);} tcon()；//调用函数，直接写函数名。/script第二种情况：在HTML文件中调用，比如点击一个按钮后调用一个定义好的函数。

　　这个情况以后再说吧。

　　带参数的函数

　　格式如下：

　　代码通过JavaScript函数函数名(参数1，参数2){函数代码}注意：可以有多个参数，参数个数可以根据需要增减。参数之间用逗号分隔。

　　根据这种格式，函数实现的任意两个数之和应写成：

　　Java Script语言代码复制内容到剪贴板functionadd2(x，y){ sum=x y；document.write(总和);}x和y则是函数的两个参数，调用函数的时候，我们可通过这两个参数把两个实际的加数传递给函数了。

　　例如，add2(3，4)会求3 4的和，add2(60，20)则会求出60和20的和。

　　返回值函数

　　Java Script语言代码复制内容到剪贴板functionadd2(x，y){ sum=x y；returnsum//返回函数值，返回后面的值叫做返回值。 }这里的返回和其他语言中的一样，但是在射流研究…或者如同等弱类型语言中，返回值类型是不需要写到函数声明里的。

　　至此，我们把Java脚本语言函数也顺便系统的说了一下。下面回到正题~

　　我们也可以封装一下我们的矩形，代码如下：

　　Java Script语言代码复制内容到剪贴板！DOCTYPEhtml htmllang=zh head元字符集=UTF八号标题封装绘制矩形方法/title/head body divid= canvas-warp canvasid= canvas style= border:1px solid # aaaaaa；显示：块；保证金：50pxauto 你的浏览器居然不支持画布？赶快换一个吧！/画布/div脚本窗户。onload=function(){ var canvas=document。getelementbyid(“canvas”)；canvas . width=800 canvas . height=600 var context=canvas获取上下文(“2d”)；drawRect(上下文，150,50,50,50,红色,5,蓝色);drawRect(上下文，250，50，50，’绿色,5,红色);drawRect(上下文，350，50，50，’黄,5,黑);} functiondrawRect(cxt，x，y，width，height，fillColor，borderWidth，border color){ cxt。begin path()；cxt.moveTo(x，y)；cxt.lineTo(x宽度，y)；cxt.lineTo(x宽度，y高度);cxt.lineTo(x，y高度);cxt.lineTo(x，y)；cxt。关闭路径()；cxt。线宽=边框宽度；cxt。笔画样式=边框颜色；cxt。填充样式=填充颜色；cxt。fill()；cxt。笔画()；}/脚本/正文/html/正文/html运行结果：

　　使用rect()方法绘制矩形犹豫绘制矩形是常用的方法，所以在画布应用程序接口中已经帮我们封装好了一个绘制矩形的方法——正确()。这个方法接收四个参数x，y，宽度，高度，实际调用时也就是

　　Java Script语言代码复制内容到剪贴板context.rect(x，y，width，height)；基于此，我们帮刚才封装的方法优化一下。

　　Java Script语言代码复制内容到剪贴板functiondrawRect(cxt，x，y，width，height，fillColor，borderWidth，border color){ cxt。begin path()；cxt.rect(x，y，width，height)；//cxt。关闭路径()；可以不用关闭path()cxt。线宽=边框宽度；cxt。笔画样式=边框颜色；cxt。填充样式=填充颜色；cxt。fill()；cxt。笔画()；}调用封装方法，绘制魔性图像来个有魔性的图像~

　　好，我们就拿它开刀，练练手，给咱刚封装好的方法活动活动筋骨。

　　Java Script语言代码复制内容到剪贴板！DOCTYPEhtml htmllang=zh head元字符集=UTF八号标题绘制魔性图形/title/head body divid= canvas-warp canvasid= canvas style= border:1px solid # aaaaaa；显示：块；保证金：50pxauto 你的浏览器居然不支持画布？赶快换一个吧！/画布/div脚本窗户。onload=function(){ var canvas=document。getelementbyid(“canvas”)；canvas . width=800 canvas . height=600 var context=canvas获取上下文(“2d”)；语境。begin path()；context.rect(0，0，800，600)；语境。填充样式= # aa 9033语境。fill()；语境。begin path()；for(vari=0；i=20i ){ drawWhiteRect(context，200 10*i，100 10*i，400-20*i，400-20 * I)；drawBlackRect(context，205 10*i，105 10*i，390-20*i，390-20 * I)；}上下文。begin path()；context.rect(395，295，5，5)；context . fill style= black context。线宽=5；语境。fill()；语境。笔画()；} functiondrawblacrect(cxt，x，y，width，height){ cxt。begin path()；cxt.rect(x，y，width，height)；cxt。线宽=5；cxt.strokeStyle= blackcxt。笔画()；} functiondrawwhiterec(cxt，x，y，width，height){ cxt。begin path()；cxt.rect(x，y，width，height)；cxt。线宽=5；cxt.strokeStyle= whitecxt。笔画()；}/脚本/正文/html/正文/html运行结果：

　　是不是很有魔性？是不是非常的酷？这段代码就不花篇幅解释了，大家自己课下琢磨琢磨，也可以尝试着用已经学过的知识去绘制一个酷酷的图像。这节课内容有点多，其实也只是介绍了四个属性和方法——closePath()、fillStyle、fill()、rect()，还有一个扩展的Java脚本语言函数讲解。

　　Canvas实现图片圆角效果本规则适用于各种帆布绘制的规则或不规则图形。

　　帆布实现图片圆角的关键是使用"纹理填充"。

　　帆布中有个名为创建模式的方法，可以让已知尺寸的图片元素转换成纹理对象，作填充用。

　　举个板栗，如果实现名为test.jpg的图片圆形效果，大小100px * 100px，则主要射流研究…代码如下：

　　Java Script语言代码复制内容到剪贴板//画布元素，图片元素var canvas=文档。查询选择器( # canvas )，image=new image()；var context=画布。获取上下文(“2d”)；image.onload=function(){ //创建图片纹理var模式=上下文。创建模式(图像，“不重复”)；//绘制一个圆context.arc(50，50，50，0，2 *数学.)；//填充绘制的圆context . fill style=pattern context。fill()；};形象。src=测试。jpg ；让帆布上下文的填充样式属性值等于这个纹理对象就可以了。

　　帆布自带的矩形绘制应用程序接口是不带圆角属性的，因此，演示中的圆角矩形使用了自定义方法。我简单瞅了瞅，要实现垂直、水平方向不同圆角大小略折腾，本着示意的目的，就没大动干戈，所以演示的圆角是对称的。

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