canvas绘制圆角矩形,canvas画多边形
使用HTML5画布绘制多边形所需的CanvasRenderingContext2D对象的主要属性和方法(带“()”的是方法)如下：
or方法基本上描述了strokeStyle用来设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是表示css颜色值的字符串。如果绘图要求很复杂，该属性的值也可以是CanvasGradient对象或CanvasPattern对象。globalAlpha定义绘图内容的透明度。该值介于0.0(完全透明)和1.0(完全不透明)之间，默认值为1.0。线宽定义绘制线条的宽度。默认值为1.0，该属性必须大于0.0。较宽的线条位于路径的中心，两边各有线条宽度的一半。LineCap指定如何绘制线条两端的线帽。的合法值为对接、圆形和方形。默认值为“对接”。BeginPath()开始一个新的绘图路径。记得每次画新路径前都要调用这个方法。MoveTo(int x，int y)定义新绘制路径的起点坐标。lineTo(int x，int y)定义绘图路径的中点坐标。stroke(int x，int y)沿绘图路径的坐标点顺序绘制一条直线。closePath()如果当前绘图路径是打开的，则关闭绘图路径。绘制三角形
将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 )；//开始新的绘制路径CTX . begin path()；//将线条颜色设置为蓝色ctx.strokeStyle= blue//设置路径起点坐标ctx.moveTo为(20，50)；//画一条直线段到坐标点(60，50) ctx.lineTo(20，100)；//画一条直线段到坐标点(60，90) ctx.lineTo(70，100)；//先关闭绘图路径。请注意，将使用一条直线来连接当前端点和起始端点。CTX . close path()；//最后根据绘制路径画一条直线CTX . stroke()；} /script /body /html对应的显示效果如下：
绘制矩形之所以单独提出画布绘制矩形，是因为画布的画笔工具——CanvasRenderingContext2D对象提供了一种绘制矩形的特殊方法。
XML/HTML代码将内容复制到剪贴板！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 )；//开始新的绘制路径CTX . begin path()；//将线条颜色设置为蓝色ctx.strokeStyle= blue//以画布中的坐标点(10，10)为绘制起点，绘制一个宽80px、高50px的矩形CTX.rect (10，10，80，50)；//按照指定的路径画一条直线CTX . stroke()；//关闭绘图路径CTX . Close path()；} /script /body /html对应的矩形效果如下所示：
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。