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. IM-即时通讯技术概述

    IM-即时通讯技术概述 简述 即时通讯技术(IM)支持用户在线实时交谈.如果要发送一条信息,用户需要打开一个小窗口,以便让用户及其朋友在其中输入信息并让交谈双方都看到交谈的内容.大多数常用的即时通讯发 ...

  2. 1294 - Positive Negative Sign（规律）

    1294 - Positive Negative Sign   PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit: ...

  3. Android之drawable state各个属性具体解释

    我们在定义一个drawable的时候能够通过xml定义的drawable对象.它使得一个图片能在不同的状态下显示不同的图案,比方一个Button,它有pressed.focused,或者其他状态,通过 ...

  4. redis研究记录

    1 redis安装 wget http://download.redis.io/redis-stable.tar.gz tar xvzf redis-stable.tar.gz cd redis-st ...

  5. Cocos2dx项目移植Android平台

    链接地址:http://blog.csdn.net/iuncle/article/details/24772183 版权声明:本文为博主原创文章,未经博主允许不得转载. 1.Classes目录下存放. ...

  6. Python 第十一篇：开发堡垒机

    一:SqlAlchemy ORM ORM:Object Relational Mapping 对象关系映射是一种程序技术,用于实现面向对象编程语言里不同类型系统的数据之间的转换 SQLAlchemy是 ...

  7. perl 安装 ZooKeeper模块

    1072 ./configure --libdir=/usr/lib 1073 make 1074 make install 1075 cpan ZooKeeper [root@wx03 c]# pe ...

  8. Event | Beijing Makerspace

    Event | Beijing Makerspace CONTACT INFORMATION 4th Floor, Zhongguancun Dream Lab, Beijing, China Pho ...

  9. android jsonarray

    Json数组是子元素的有序集合,每个子元素都有一个下标,可以根据下标操纵Json数组的子元素.类JsonArray是bantouyan-json库对Json数组的抽象,提供操纵Json数组的各种方法. ...

  10. sublime2 c++的一些使用配置

    1 下载安装好tdw gcc后,配置好环境变量后,配置sublime2. tools->build system-> new build system... 里面输入: { "c ...