HTML5 Canvas自定义圆角矩形与虚线(RoundedRectangle and Dash Line)
创新互联是一家专注于网站建设、网站制作与策划设计,海曙网站建设哪家好?创新互联做网站,专注于网站建设十年,网设计领域的专业建站公司;建站业务涵盖:海曙等地区。海曙做网站价格咨询:13518219792
实现向HTML Canvas 2d context绘制对象中添加自定义的函数功能演示,如何绘制虚线
以及控制虚线间隔大小,学会绘制圆角矩形的技巧。
HTML5 Canvas绘制对象中提供的原生功能没有实现绘制圆角矩形与虚线的功能,但是
通过JavaScript语言的Object.prototype可以实现对对象CanvasRenderingContext2D添
加这两个函数功能。代码的演示效果如下:
组件fishcomponent.js的代码如下:
CanvasRenderingContext2D.prototype.roundRect = function(x, y, width, height, radius, fill, stroke) { if (typeof stroke == "undefined") { stroke = true; } if (typeof radius === "undefined") { radius = 5; } this.beginPath(); this.moveTo(x + radius, y); this.lineTo(x + width - radius, y); this.quadraticCurveTo(x + width, y, x + width, y + radius); this.lineTo(x + width, y + height - radius); this.quadraticCurveTo(x + width, y + height, x + width - radius, y+ height); this.lineTo(x + radius, y + height); this.quadraticCurveTo(x, y + height, x, y + height - radius); this.lineTo(x, y + radius); this.quadraticCurveTo(x, y, x + radius, y); this.closePath(); if (stroke) { this.stroke(); } if (fill) { this.fill(); } }; CanvasRenderingContext2D.prototype.dashedLineTo = function (fromX, fromY, toX, toY, pattern) { // default interval distance -> 5px if (typeof pattern === "undefined") { pattern = 5; } // calculate the delta x and delta y var dx = (toX - fromX); var dy = (toY - fromY); var distance = Math.floor(Math.sqrt(dx*dx + dy*dy)); var dashlineInteveral = (pattern <= 0) ? distance : (distance/pattern); var deltay = (dy/distance) * pattern; var deltax = (dx/distance) * pattern; // draw dash line this.beginPath(); for(var dl=0; dlHTML中调用演示: 转载请注明Canvas Rounded Rectangle Demo HTML5 Canvas Dash-line Demo - By Gloomy Fish
Dash line and Rounded Rectangle
当前名称:HTML5Canvas自定义圆角矩形与虚线(RoundedRectangleandDashLine)
文章路径:http://bzwzjz.com/article/pjisio.html