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 -> 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)的更多相关文章

  1. Android开发之自定义圆角矩形图片ImageView的实现

    android中的ImageView只能显示矩形的图片,这样一来不能满足我们其他的需求,比如要显示圆角矩形的图片,这个时候,我们就需要自定义ImageView了,其原理就是首先获取到图片的Bitmap ...

  2. Android开发之自定义圆角矩形图片ImageView的实现 - Jamy Cai

    android中的ImageView只能显示矩形的图片,这样一来不能满足我们其他的需求,比如要显示圆角矩形的图片,这个时候,我们就需要自定义ImageView了,其原理就是首先获取到图片的Bitmap ...

  3. Android自定义圆角矩形进度条2

    效果图: 或 方法讲解: (1)invalidate()方法 invalidate()是用来刷新View的,必须是在UI线程中进行工作.比如在修改某个view的显示时, 调用invalidate()才 ...

  4. HTML5 Canvas 自定义笔刷

    1. [图片] QQ截图20120715095110.png ​​2. [代码][HTML]代码 <!DOCTYPE html><html lang="en" & ...

  5. html5 canvas 自定义画图裁剪图片

    html5 给我们带来了极大惊喜的canvas标签,有了它我们可以在浏览器客户端处理图片,不需要经过服务器周转.可以实现: 1.照片本地处理,ps有的一些基本功能都有 2.结合js可以实现一些很炫的动 ...

  6. [HTML5 Canvas学习]绘制矩形

    1.使用strokeRect和fillRect方法绘制矩形 a.strokeRect是绘制一个不填充的矩形 b.fillRect是绘制一个填充的矩形 代码: <script> var ca ...

  7. html5 canvas（基本矩形）

    先从简单的开始 fillRect(x,y,width,height) 在坐标x,y的位置加上一个宽,高   如: fillRect(0,0,500,500)//在坐标0,0处加上一个宽高500的填充矩 ...

  8. canvas 绘制圆角矩形

    <!DOCTYPE HTML> <head> <meta charset = "utf-8"> <title>canvas</ ...

  9. Android 自定义的圆角矩形ImageView 工具类

    上图看效果 自定义圆角矩形ImageView工具类 package com.wechaotou.utils; import android.content.Context; import androi ...

随机推荐

  1. Hdu 2364 Escape

    Problem地址:http://acm.hdu.edu.cn/showproblem.php?pid=2364 这道题的特殊之处在于能转弯时不能直走,必须转弯,所以在行走时,要判断能否转弯,不能转弯 ...

  2. 搜狐畅游：每月给员工直系长辈2000元爱孝薪_企业新闻_265G产业频道

    搜狐畅游:每月给员工直系长辈2000元爱孝薪_企业新闻_265G产业频道 搜狐畅游:每月给员工直系长辈2000元爱孝薪

  3. 十句话教你学会Linux数据流重定向

    1.看到重定向一下子就想起了web里面的redirect,没错,但是Linux数据流重定向的作用不是跳到另一个网页,而是用来存储重要的屏幕信息.将不必要的屏幕信息输出到文件里或者“黑洞”里.将错误信息 ...

  4. 解决安装oracle后系统变慢问题

    Oracle数据库是一个很占资源的软件,光一个实例服务所占内存,根据其安装时分配的内存就至少要达到256MB以上,再加上其他附属服务,光内存就要占用物理内存的400M左右,虚拟内存也会有等值或更高的损 ...

  5. FLASH ROM与EEPROM的区别

    EEPROM,虽然也叫“非易失性数据存储器”,但它不能直接参与ALU运算,只是用于掉电不丢失的数据存储. EEPROM和片内RAM 类似,也属于数据存储器,它的特点是数据掉电可保持,而程序存储器一般指 ...

  6. Oracle 11g RAC 环境下单实例非缺省监听及端口配置

    如果在Oracle 11g RAC环境下使用dbca创建单实例数据库后,Oracle会自动将其注册到缺省的1521端口及监听器.大多数情况下我们使用的为非缺省监听器以及非缺省的监听端口.而且在Orac ...

  7. Embedded Linux Primer----嵌入式Linux基础教程--2.4节--嵌入式Linux发行版

    嵌入式Linux发行版 究竟什么是Linux发行版?在Linux内核引导之后,它期望找到并挂载根文件系统.当一个匹配的根文件系统已经挂载上,启动脚本开始运行大量程序和系统要求的工具.这些程序经常调用其 ...

  8. oracle rowid 详解

    oracle rowid详解 今天是2013-09-15,存储在数据库中的每一行数据都有一个地址,oracle使用rowid数据类型在存储地址.rowid有如下类别: 1)physical rowid ...

  9. iOS 类别和扩展（Categories和Extensions）

    分类(Category)   分类能够做到的事情主要是:即使在你不知道一个类的源码情况下,向这个类添加扩展的方法.   此外,分类能够保证你的实现类和其他的文件区分开.   1 #import “UI ...

  10. C#高级编程随笔

    1.把类创作的变量叫做对象2.类就是对象的模版3.类定义了每个对象的数据和功能4.接口不能被实例化,抽象类不能被实例化5.抽象基类可以包含非抽象方法,而接口只能包含抽象方法6.一个类可以实现多个接口7 ...