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. Poj 2299 Ultra-QuickSort(归并排序)

    题目链接:http://poj.org/problem?id=2299 思路分析:序列的逆序数即为交换次数,所以求出该序列的逆序数即可.根据分治法思想,序列分为两个大小相等的两部分, 分别求子序列的逆 ...

  2. 【剑指Offer学习】【面试题18 ：树的子结构】

    题目:输入两棵二叉树A 和B.推断B 是不是A 的子结构. 二叉树结点的定义: /** * 二叉树的树结点 */ public static class BinaryTreeNode { int va ...

  3. iOS中正确的截屏姿势

    昨天写了个用到截屏功能的插件,结果问题不断,今天终于解决好了,把debug过程中所有尝试过的截屏方法都贴出来吧- 第一种 这是iOS 3时代开始就被使用的方法,它被废止于iOS 7.iOS的私有方法, ...

  4. IOS中使用像素位图(CGImageRef)对图片进行处理

    IOS中对图片进行重绘处理的方法总结 一.CGImageRef是什么 CGImageRef是定义在QuartzCore框架中的一个结构体指针,用C语言编写.在CGImage.h文件中,我们可以看到下面 ...

  5. iOS字符串NSString中去掉空格(或替换为某个字符串)

    http://blog.sina.com.cn/s/blog_6f29e81f0101qwbk.html [问题描述]       今天请求服务器返回的字段中含有空格,这空格是服务器开发人员不小心往数 ...

  6. Android学习笔记：adb 与 adb shell操作 以及中文乱码解决

    1.安装app >adb install xxx.apk 2.卸载app >adb uninstall app的包路径 如:>adb uninstall com.example.my ...

  7. thinkphp 分组、页面跳转与ajax

    本节课大纲: 一.多应用配置技巧 二.使用分组 三.页面跳转 $this->success('查询成功',U('User/test')); $this->redirect('User/te ...

  8. configure.ac

    # # Copyright (C) - Tobias Brunner # Copyright (C) - Andreas Steffen # Copyright (C) - Martin Willi ...

  9. CSipSimple最新版本号(二)--加入视频功能

    前面我们编译好了最新版本号的CSipSimple,并且測试已经能够打电话了.如今要把视频功能加上去. 不知道怎么编译的,能够看我的上一篇博文:CSipSimple最新版本号 我们先来看一下之前的项目是 ...

  10. MYSQL设计优化

    本文将从各方面介绍优化mysql设计的一些方式. 1.优化sql语句 (1)定位须要优化的sql语句 1)show status统计SQL语句频率 对Myisam和Innodb存储引擎都计数的參数: ...