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. MFC自绘控件学习总结第二贴---转

    首先感谢大家对第一帖的支持,应一些网友烈要求下面我在关于上一贴的一些补充和说明(老鸟可以无视)这一贴是实战+理论不知道第一帖的先看第一帖:http://topic.csdn.net/u/2011071 ...

  2. 解题报告 HDU1159 Common Subsequence

    Common Subsequence Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u ...

  3. [对话CTO]当当网熊长青：兴趣是成为优秀工程师的第一因素-CSDN.NET

    Women Techmaker 北京站 [对话CTO]当当网熊长青:兴趣是成为优秀工程师的第一因素-CSDN.NET     [对话CTO]当当网熊长青:兴趣是成为优秀工程师的第一因素    发表于2 ...

  4. Google瓦片地图算法解析

    基本概念: 地图瓦片地址:http://mt2.google.cn/vt/lyrs=m@167000000&hl=zh-CN&gl=cn&x=420&y=193& ...

  5. Android事件机制全然解析

    android事件是一级一级传递的,假设父控件不拦截.就传给子控件,假设父控件想要消费事件也就是拦截事件的话,须要重写这种方法 public boolean onInterceptTouchEvent ...

  6. iOS Responder Chain 响应者链

    一.事件分类 对于IOS设备用户来说,他们操作设备的方式主要有三种:触摸屏幕.晃动设备.通过遥控设施控制设备.对应的事件类型有以下三种: 1.触屏事件(Touch Event) 2.运动事件(Moti ...

  7. Linux下Django开发学习(一)

    一,环境配置: 环境:Ubuntu 14.04 LTS, Python 2.7,  Django 1.8 安装Python : Ubuntu自带python2.7,不用安装 安装pip:sudo ap ...

  8. JNI之HelloWorld

    什么是JNI? JNI java本地开发接口 JNI 是一个协议 这个协议用来沟通java代码和外部的本地代码(c/c++). 通过这个协议,java代码就可以调用外部的c/c++代码 外部的c/c+ ...

  9. oracle11g dataguard 完全手册(转)

    转自:http://www.cnblogs.com/tippoint/archive/2013/04/18/3029019.html 一.前言:   网络上关于dataguard的配置文章很多,但是很 ...

  10. HBase的Snapshots功能介绍

    HBase的Snapshots功能介绍 hbase的snapshot功能还是挺有用的,本文翻译自cloudera的一篇博客,希望对想了解snapshot 的朋友有点作用,如果翻译得不好的地方,请查看原 ...