HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)
来源:互联网 发布:plc编程100例梯形图 编辑:程序博客网 时间:2024/06/05 05:28
HTML5 Canvas自定义圆角矩形与虚线(RoundedRectangle and Dash Line)
实现向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 -> 5pxif (typeof pattern === "undefined") {pattern = 5;}// calculate the delta x and delta yvar 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 linethis.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 contextvar 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画图10:圆角矩形
- html5 canvas 绘制圆角矩形
- 【cocos2d-iphone】CCLayerColor 设置圆角 ,CCLayerColor Rounded Rectangle Drawing
- jQuery - Plugins插件 - Rounded Corner圆角矩形
- HTML5 JS Canvas利用贝塞尔曲线绘制圆角矩形
- html5<canvas>标签绘制矩形,线条,圆
- HTML5 Canvas: 绘制矩形
- hdu 1221 Rectangle and Circle(矩形与圆焦点问题)
- HDU 1221 Rectangle and Circle(判断圆与矩形是否相交)
- HDU 1221 Rectangle and Circle(判定圆与矩形是否相交)
- HDU 1221 Rectangle and Circle(判定圆与矩形是否相交)
- 【html5】HTML5中canvas如何画虚线
- 画正圆角矩形 - HTML5 Canvas 作图
- html5中canvas绘制矩形
- HTML5 canvas 绘制矩形 改变矩形颜色
- Canvas绘制圆角矩形
- 用HTML5的canvas标签画虚线
- Ubuntu上的android sdk: ./emulator: No such file or directory
- C++ 模拟C#的静态函数
- 一个好的C程序员应该做到
- hdoj4405-Aeroplane chess
- 一位软件工程师的6年总结
- HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)
- par中的mex参数
- Csharp: Detect Mobile Browsers
- 网页返回顶部
- tcpdump抓包分析详解
- PHP伪静态
- sql server一般性问题
- 网站优化中软文的作用推广
- 在线视频播放时出现帧过大问题