HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)
2013-07-17 21:02
381 查看
HTML5 Canvas自定义圆角矩形与虚线(RoundedRectangle and Dash Line)
实现向HTML Canvas 2d context绘制对象中添加自定义的函数功能演示,如何绘制虚线
以及控制虚线间隔大小,学会绘制圆角矩形的技巧。
HTML5 Canvas绘制对象中提供的原生功能没有实现绘制圆角矩形与虚线的功能,但是
通过JavaScript语言的Object.prototype可以实现对对象CanvasRenderingContext2D添
加这两个函数功能。代码的演示效果如下:
组件fishcomponent.js的代码如下:
HTML中调用演示:
转载请注明
实现向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; dl<dashlineInteveral; dl++) { if(dl%2) { this.lineTo(fromX + dl*deltax, fromY + dl*deltay); } else { this.moveTo(fromX + dl*deltax, fromY + dl*deltay); } } this.stroke(); };
HTML中调用演示:
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="chrome=IE8"> <meta http-equiv="Content-type" content="text/html;charset=UTF-8"> <title>Canvas Rounded Rectangle Demo</title> <script src="fishcomponent.js"></script> <link href="default.css" rel="stylesheet" /> <script> var ctx = null; // global variable 2d context var imageTexture = null; window.onload = function() { var canvas = document.getElementById("text_canvas"); console.log(canvas.parentNode.clientWidth); canvas.width = canvas.parentNode.clientWidth; canvas.height = canvas.parentNode.clientHeight; if (!canvas.getContext) { console.log("Canvas not supported. Please install a HTML5 compatible browser."); return; } var context = canvas.getContext('2d'); context.strokeStyle="red"; context.fillStyle="RGBA(100,255,100, 0.5)"; context.roundRect(50, 50, 150, 150, 5, true); context.strokeStyle="blue"; for(var i=0; i<10; i++) { var delta = i*20; var pattern = i*2+1; context.dashedLineTo(250, 50+delta, 550, 50+delta, pattern); } } </script> </head> <body> <h1>HTML5 Canvas Dash-line Demo - By Gloomy Fish</h1> <pre>Dash line and Rounded Rectangle</pre> <div id="box_plot"> <canvas id="text_canvas"></canvas> </div> </body> </html>
转载请注明
相关文章推荐
- HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)
- HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)
- HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)
- HTML5 Canvas自定义圆角矩形与虚线示例代码
- [转]html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
- html5 Canvas画图10:圆角矩形
- 自定义View将圆角矩形绘制在Canvas上
- 使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
- 画正圆角矩形 - HTML5 Canvas 作图
- Android开发使用自定义View将圆角矩形绘制在Canvas上的方法
- HTML5 JS Canvas利用贝塞尔曲线绘制圆角矩形
- html5 canvas 绘制圆角矩形
- HTML5 移动开发 -- Canvas 绘图 9.1 矩形,填充三角形
- android editText 自定义为圆角矩形背景
- android 画虚线、实线,画圆角矩形,一半圆角
- Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形)
- Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形)
- Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形)
- 自定义圆角矩形图片/圆形图片