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. Ubuntu安装Adobe Reader

               到 这里依次选择最新版本的Adobe Reader,我选择目前最新的 9.5.5版本的,下载下来后,双击选择dep包,启动软件中心进行安装,中间会提示软件包欠佳,选择" ...

  2. Redhat 5.8系统安装R语言作Arima模型预测

    请见Github博客:http://wuxichen.github.io/Myblog/timeseries/2014/09/02/RJavaonLinux.html

  3. 【GIVENCHY商务休闲风格/白色/100%精梳棉/撞色拼接领/长袖衬衣】玛萨玛索男装网购商城

    [GIVENCHY商务休闲风格/白色/100%精梳棉/撞色拼接领/长袖衬衣]玛萨玛索男装网购商城 GIVENCHY商务休闲风格/白色/100%精梳棉/撞色拼接领/长袖衬衣

  4. Windows 下统计行数的命令

    大家都知道在Linux下统计文本行数能够用wc -l 命令.比如: -bash-3.2$ cat pif_install.log | wc -l       712 但在Windows下怎样统计输出文 ...

  5. windows和centos用cutycapt截网页的图

    centos下:(主要参考http://loosky.net/2816.html) (1)安装qt47 增加qt47的源 vim /etc/yum.repos.d/atrpms.repo //加入如下 ...

  6. pojg487-3279电话号码转换(字符映射)

    http://poj.grids.cn/practice/2974 注意输入中连字符可以任意添加和删除. 描述企业喜欢用容易被记住的电话号码.让电话号码容易被记住的一个办法是将它写成一个容易记住的单词 ...

  7. 为什么C语言在2013年仍然很重要：一个简单的例子

    附注:在最初的文章里,我没说明进行模2^64的计算——我当然明白那些不是“正确的”斐波那契数列,其实我不是想分析大数,我只是想探寻编译器产生的代码和计算机体系结构而已. 最近,我一直在开发Dynvm— ...

  8. 基于visual Studio2013解决C语言竞赛题之0522和为素

     题目

  9. ONOS系统架构演进，实现高可用性解决方案

    上一篇文章<ONOS高可用性和可扩展性实现初探>讲到了ONOS系统架构在高可用.可扩展方面技术概况,提到了系统在分布式集群中怎样保证数据的一致性.在数据终于一致性方面,ONOS採用了Gos ...

  10. linux问题： 切换用户之后变成-bash-4.1$

    新增用户 git 添加用户 #sudo useradd -m -s /bin/bash -g group loginname -m 创建home目录 (不加这个要手动添加目录,不然会出现No dire ...