第十日 http://www.10thday.com 此刻我的思想真的枯竭了 Fri, 03 Feb 2012 07:04:31 +0000 en hourly 1 http://wordpress.org/?v=3.3 Win7下Ruby on Rails环境搭建 http://www.10thday.com/archives/win7%e4%b8%8bruby-on-rails%e7%8e%af%e5%a2%83%e6%90%ad%e5%bb%ba.html http://www.10thday.com/archives/win7%e4%b8%8bruby-on-rails%e7%8e%af%e5%a2%83%e6%90%ad%e5%bb%ba.html#comments Fri, 03 Feb 2012 07:04:31 +0000 admin http://www.10thday.com/?p=34 http://rubyonrails.org/download这个网站上下载的，关于ruby资源站现在有很多，大家可以度娘，谷哥下。 下载Windows installer 然后双击安装即可。 安装成功的话，打开CMD： 键入 >ruby -v 即可查看ruby的版本 此时，你已经可以编写ruby代码了，下载一个SciTE编辑器，此编辑器小巧易用，编写代码后按F5即可运行。 在CMD窗口也可编写ruby代码： 键入irb 回车 显示：irb<main>:001:0> 你就可以写简单代码了， 键入：puts 1+2 回车 显示输出 3 2，要想安装Rails 需要先安装 RubyGems 依然从刚才的网站下载RubyGems 下载之后是一个zip包，然后解压到任意目录 在cmd窗口进入刚才解压的RubyGems目录 键入：ruby setup.rb 安装成功后显示RubyGems X.X.X installed 现在就可以安装了Rails了。 键入：gem install rails 后面可以跟上你想安装的 版本号： gem install rails -v 2.3.8 在安装rails的过程中可能出现的错误： Please update your PATH to include build tools or download the Dev from 'http://rubyinstaller.org/downloads' and follow the instructi at 'http://github.com/oneclick/rubyinstaller/wiki/Development-Kit' 出现此错误时，先从https://github.com/oneclick/rubyinstaller/downloads/下载并安装DevKit 然后进入刚才解压的目录， 键入：ruby dk.rb install 安装成功后在键入：gem install rails. 如果安装过程中中断，多安装几次试试，因为安装Rails是gems通过从远程下载Rails到本地，因为网络等原因可能中断，多试几次就可以了。]]> 1，先安装ruby 我安装的ruby版本是1.8.7

我从http://rubyonrails.org/download这个网站上下载的，关于ruby资源站现在有很多，大家可以度娘，谷哥下。

下载Windows installer 然后双击安装即可。

安装成功的话，打开CMD：

键入 >ruby -v 即可查看ruby的版本

此时，你已经可以编写ruby代码了，下载一个SciTE编辑器，此编辑器小巧易用，编写代码后按F5即可运行。

在CMD窗口也可编写ruby代码：
键入irb
回车
显示：irb<main>:001:0>
你就可以写简单代码了，
键入：puts 1+2 回车
显示输出 3

2，要想安装Rails 需要先安装 RubyGems 依然从刚才的网站下载RubyGems

下载之后是一个zip包，然后解压到任意目录
在cmd窗口进入刚才解压的RubyGems目录

键入：ruby setup.rb
安装成功后显示RubyGems X.X.X installed

现在就可以安装了Rails了。

键入：gem install rails

后面可以跟上你想安装的 版本号：
gem install rails -v 2.3.8

在安装rails的过程中可能出现的错误：

Please update your PATH to include build tools or download the Dev
from ‘http://rubyinstaller.org/downloads’ and follow the instructi
at ‘http://github.com/oneclick/rubyinstaller/wiki/Development-Kit’

出现此错误时，先从https://github.com/oneclick/rubyinstaller/downloads/下载并安装DevKit
然后进入刚才解压的目录，
键入：ruby dk.rb install

安装成功后在键入：gem install rails.

如果安装过程中中断，多安装几次试试，因为安装Rails是gems通过从远程下载Rails到本地，因为网络等原因可能中断，多试几次就可以了。

原创文章，转载请注明： 转载自第十日

本文链接地址: Win7下Ruby on Rails环境搭建

]]> http://www.10thday.com/archives/win7%e4%b8%8bruby-on-rails%e7%8e%af%e5%a2%83%e6%90%ad%e5%bb%ba.html/feed 0 利用Jxcex在Canvas中绘制动态时钟 http://www.10thday.com/archives/jscex1.html http://www.10thday.com/archives/jscex1.html#comments Tue, 27 Dec 2011 08:59:35 +0000 admin http://www.10thday.com/?p=19 旋转重力场粒子系统》受到启发，就用Jscex在Canvas中做了一个时钟，很多代码都是用的张磊的，而且有些啰嗦，很多可以写成函数，本人比较懒，暂且先这么着吧。 源码如下： 
<html xmlns="http://www.w3.org/1999/xhtml">  
	<head>  
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
		<title>Canvas Test</title>
		<script language="javascript" type="text/javascript" src="./src/uglifyjs-parser.js"></script>
		<script language="javascript" type="text/javascript" src="./src/jscex-jit.js"></script>
		<script language="javascript" type="text/javascript" src="./src/jscex-builderbase.js"></script>
		<script language="javascript" type="text/javascript" src="./src/jscex-async.js"></script>
		<script language="javascript" type="text/javascript" src="./src/jscex-async-powerpack.js"></script>
	</head> 
	<body style="margin:0;padding:0">

		<canvas style="border:1px solid #c3c3c3;" id="myCanvas" width="800" height="600" onmousemove="get_location(event)" ></canvas>

		<script type="text/javascript">
		//Your browser does not support the canvas element.
		var c = document.querySelector('#myCanvas');
		var cxt = c.getContext('2d');

		function get_location(e){

			//cxt.clearRect(0,0,800,600);
			x = e.clientX;
			y = e.clientY;

			var colors = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
			var color = '#';
			var brush = Math.random()*30;
			for (var i = 0; i < 6; i++) {
				//取得0-15之间的随机整数
				index = Math.round(Math.random() * 15);
				color += colors[index];
			}
			cxt.fillStyle=color;
			cxt.beginPath();
			cxt.arc(x,y,brush,0,Math.PI*2,true);
			cxt.closePath();
			cxt.fill();	
		}

		var canvas = document.getElementById("myCanvas");
		var cxt = canvas.getContext("2d");
		var line = {
		x: 400,
		y: 300,
		length: 200,
		angle: 0
		};
		var PER = Math.PI/30;

		var roundAsync = eval(Jscex.compile("async", function () {
		while (true) {
		cxt.fillStyle = "rgba(0, 0, 0, .3)";
		cxt.fillRect(0, 0, canvas.width, canvas.height);
		//绘制时钟上的点
		for(var j=0;j<=60;j++){
			var r = 2;
			if(j%5 == 0){r = 5;}
			var sec = PER*j;
			var xsec = line.x + line.length * Math.cos(sec);
			var ysec = line.y + line.length * Math.sin(sec);
			cxt.fillStyle = "#fff";
			cxt.beginPath();
			cxt.arc(xsec, ysec, r, 0, Math.PI * 2, true);
			cxt.closePath();
			cxt.fill();
		}
		try {
		//获取时间
		var date = new Date();
		var h = date.getHours();
		var m = date.getMinutes();
		var s = date.getSeconds();

		line.angle += (Math.PI * 2) / 300;
		var x = line.x + line.length * Math.cos(line.angle);
		var y = line.y + line.length * Math.sin(line.angle);

		var TWO_PI = Math.PI*2;
		var HALF_PI = Math.PI/2;
		//时针
		var xh = line.x + Math.cos(TWO_PI*(h%12)/12- HALF_PI)*150 ;
		var yh = line.y + Math.sin(TWO_PI*(h%12)/12- HALF_PI)*150 ;

		cxt.strokeStyle = "#fff";
		cxt.lineWidth = 6;
		cxt.beginPath();
		cxt.moveTo(line.x, line.y);
		cxt.lineTo(xh, yh);
		cxt.closePath();
		cxt.stroke();

		//分针
		var xm = line.x + Math.cos(TWO_PI*m/60- HALF_PI)*170 ;
		var ym = line.y + Math.sin(TWO_PI*m/60- HALF_PI)*170;

		cxt.strokeStyle = "#f00";
		cxt.lineWidth = 4;
		cxt.beginPath();
		cxt.moveTo(line.x, line.y);
		cxt.lineTo(xm, ym);
		cxt.closePath();
		cxt.stroke();
		//秒针
		var xs = line.x + Math.cos(TWO_PI*s/60- HALF_PI)*190 ;
		var ys = line.y + Math.sin(TWO_PI*s/60- HALF_PI)*190;

		cxt.strokeStyle = "#ff0";
		cxt.lineWidth = 2;
		cxt.beginPath();
		cxt.moveTo(line.x, line.y);
		cxt.lineTo(xs, ys);
		cxt.closePath();
		cxt.stroke();

		//画表的中心
		cxt.fillStyle = "#000";
		cxt.beginPath();
		cxt.arc(line.x, line.y, 6, 0, Math.PI * 2, true);
		cxt.closePath();
		cxt.fill();
		//这个还是上次文章那个，鼠标滑过显示随机圆型
		var colors = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
			var color = '#';
			var brush = Math.random()*10;
			for (var i = 0; i < 6; i++) {
				//取得0-15之间的随机整数
				index = Math.round(Math.random() * 15);
				color += colors[index];
			}
			cxt.fillStyle=color;
			cxt.beginPath();

			cxt.arc(x,y,brush,0,Math.PI*2,true);
			cxt.closePath();
			cxt.fill();
			cxt.save();

		$await(Jscex.Async.sleep(100));
		}
		catch (e) {
		alert(e)
		}
		}
		}))
		roundAsync().start(); 
	</script>	
	</body>
</html>
]]> 在上次  Canvas中随机绘制圆形之后，看了cnblog中张磊大神的文章《旋转重力场粒子系统》受到启发，就用Jscex在Canvas中做了一个时钟，很多代码都是用的张磊的，而且有些啰嗦，很多可以写成函数，本人比较懒，暂且先这么着吧。

源码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Canvas Test</title>
		<script language="javascript" type="text/javascript" src="./src/uglifyjs-parser.js"></script>
		<script language="javascript" type="text/javascript" src="./src/jscex-jit.js"></script>
		<script language="javascript" type="text/javascript" src="./src/jscex-builderbase.js"></script>
		<script language="javascript" type="text/javascript" src="./src/jscex-async.js"></script>
		<script language="javascript" type="text/javascript" src="./src/jscex-async-powerpack.js"></script>
	</head>
	<body style="margin:0;padding:0">

		<canvas style="border:1px solid #c3c3c3;" id="myCanvas" width="800" height="600" onmousemove="get_location(event)" ></canvas>

		<script type="text/javascript">
		//Your browser does not support the canvas element.
		var c = document.querySelector('#myCanvas');
		var cxt = c.getContext('2d');

		function get_location(e){

			//cxt.clearRect(0,0,800,600);
			x = e.clientX;
			y = e.clientY;

			var colors = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
			var color = '#';
			var brush = Math.random()*30;
			for (var i = 0; i < 6; i++) {
				//取得0-15之间的随机整数
				index = Math.round(Math.random() * 15);
				color += colors[index];
			}
			cxt.fillStyle=color;
			cxt.beginPath();
			cxt.arc(x,y,brush,0,Math.PI*2,true);
			cxt.closePath();
			cxt.fill();
		}

		var canvas = document.getElementById("myCanvas");
		var cxt = canvas.getContext("2d");
		var line = {
		x: 400,
		y: 300,
		length: 200,
		angle: 0
		};
		var PER = Math.PI/30;

		var roundAsync = eval(Jscex.compile("async", function () {
		while (true) {
		cxt.fillStyle = "rgba(0, 0, 0, .3)";
		cxt.fillRect(0, 0, canvas.width, canvas.height);
		//绘制时钟上的点
		for(var j=0;j<=60;j++){
			var r = 2;
			if(j%5 == 0){r = 5;}
			var sec = PER*j;
			var xsec = line.x + line.length * Math.cos(sec);
			var ysec = line.y + line.length * Math.sin(sec);
			cxt.fillStyle = "#fff";
			cxt.beginPath();
			cxt.arc(xsec, ysec, r, 0, Math.PI * 2, true);
			cxt.closePath();
			cxt.fill();
		}
		try {
		//获取时间
		var date = new Date();
		var h = date.getHours();
		var m = date.getMinutes();
		var s = date.getSeconds();

		line.angle += (Math.PI * 2) / 300;
		var x = line.x + line.length * Math.cos(line.angle);
		var y = line.y + line.length * Math.sin(line.angle);

		var TWO_PI = Math.PI*2;
		var HALF_PI = Math.PI/2;
		//时针
		var xh = line.x + Math.cos(TWO_PI*(h%12)/12- HALF_PI)*150 ;
		var yh = line.y + Math.sin(TWO_PI*(h%12)/12- HALF_PI)*150 ;

		cxt.strokeStyle = "#fff";
		cxt.lineWidth = 6;
		cxt.beginPath();
		cxt.moveTo(line.x, line.y);
		cxt.lineTo(xh, yh);
		cxt.closePath();
		cxt.stroke();

		//分针
		var xm = line.x + Math.cos(TWO_PI*m/60- HALF_PI)*170 ;
		var ym = line.y + Math.sin(TWO_PI*m/60- HALF_PI)*170;

		cxt.strokeStyle = "#f00";
		cxt.lineWidth = 4;
		cxt.beginPath();
		cxt.moveTo(line.x, line.y);
		cxt.lineTo(xm, ym);
		cxt.closePath();
		cxt.stroke();
		//秒针
		var xs = line.x + Math.cos(TWO_PI*s/60- HALF_PI)*190 ;
		var ys = line.y + Math.sin(TWO_PI*s/60- HALF_PI)*190;

		cxt.strokeStyle = "#ff0";
		cxt.lineWidth = 2;
		cxt.beginPath();
		cxt.moveTo(line.x, line.y);
		cxt.lineTo(xs, ys);
		cxt.closePath();
		cxt.stroke();

		//画表的中心
		cxt.fillStyle = "#000";
		cxt.beginPath();
		cxt.arc(line.x, line.y, 6, 0, Math.PI * 2, true);
		cxt.closePath();
		cxt.fill();
		//这个还是上次文章那个，鼠标滑过显示随机圆型
		var colors = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
			var color = '#';
			var brush = Math.random()*10;
			for (var i = 0; i < 6; i++) {
				//取得0-15之间的随机整数
				index = Math.round(Math.random() * 15);
				color += colors[index];
			}
			cxt.fillStyle=color;
			cxt.beginPath();

			cxt.arc(x,y,brush,0,Math.PI*2,true);
			cxt.closePath();
			cxt.fill();
			cxt.save();

		$await(Jscex.Async.sleep(100));
		}
		catch (e) {
		alert(e)
		}
		}
		}))
		roundAsync().start();
	</script>
	</body>
</html>

原创文章，转载请注明： 转载自第十日

本文链接地址: 利用Jxcex在Canvas中绘制动态时钟

]]> http://www.10thday.com/archives/jscex1.html/feed 0 Jscex异步编程库的 使用方法 http://www.10thday.com/archives/jscex%e5%bc%82%e6%ad%a5%e7%bc%96%e7%a8%8b%e5%ba%93%e7%9a%84-%e4%bd%bf%e7%94%a8%e6%96%b9%e6%b3%95.html http://www.10thday.com/archives/jscex%e5%bc%82%e6%ad%a5%e7%bc%96%e7%a8%8b%e5%ba%93%e7%9a%84-%e4%bd%bf%e7%94%a8%e6%96%b9%e6%b3%95.html#comments Tue, 27 Dec 2011 03:44:59 +0000 admin http://www.10thday.com/?p=16 Jscex异步编程库，该库由国人 赵劼 开发。是开源的，你可以上https://github.com/JeffreyZhao/jscex免费获取到。如果你想进一步了解，请访问http://blog.zhaojie.me/tag/Jscex/来学习更多。 按照老赵的解释：Jscex的核心功能之一，便是对异步编程进行了极大程度的简化，帮助让开发人员摆脱异步编程方面烦恼，将注意力尽可能多地放在逻辑的表现上，而非异步编程过程中的各类奇技淫巧。 在Canvas上用，我理解的就是把JavaScript绘图，变换等操作按照时间轴显示出来，但是按照老赵的意思，貌似时间轴在表面上是用不到的。 如果要使用Jscex的异步编程库，先从github上获取Jscex的压缩包，解压后有src文件夹 然后在你的html文件中引入js 
<script src="uglifyjs-parser.js"></script>
<script src="jscex-jit.js"></script>
<script src="jscex-builderbase.js"></script>
<script src="jscex-async.js"></script>
<script src="jscex-async-powerpack.js"></script>
当然，文件的目录你要写对。 下面代码是Jscex的简单示例，演示一个用Jscex从300，170的坐标点画300像素长的直线过程。 
var canvas = document.getElementById("myCanvas");
var cxt = canvas.getContext("2d");
var line = {
	x: 300,
	y: 170,
	length: 300,
	width: 4
};

var lineAsync = eval(Jscex.compile("async", function () {
	try{
		cxt.lineWidth = line.width;
		cxt.moveTo(line.x,line.y);

		for(var i=0; i<line.length; i++){
		$await(Jscex.Async.sleep(10));
		line.x++;
		line.y++;
		cxt.lineTo(line.x,line.y);
		cxt.stroke();

		}
	} catch (e) {alert(e)}

		}));
lineAsync().start();
当然你也可以不用Jscex，但是你会看不到画的过程。以下是不用Jscex的示例： 
var canvas = document.getElementById("myCanvas");
var cxt = canvas.getContext("2d");
var line = {
	x: 300,
	y: 170,
	length: 300,
	width: 4
};
cxt.lineWidth = line.width;
cxt.moveTo(line.x,line.y);
cxt.lineTo(line.x+300,line.y+300);
cxt.stroke();
HTML代码是： 
<html xmlns="http://www.w3.org/1999/xhtml">  
	<head>  
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
		<title>Canvas Test</title>
		<script language="javascript" type="text/javascript" src="./src/uglifyjs-parser.js"></script>
		<script language="javascript" type="text/javascript" src="./src/jscex-jit.js"></script>
		<script language="javascript" type="text/javascript" src="./src/jscex-builderbase.js"></script>
		<script language="javascript" type="text/javascript" src="./src/jscex-async.js"></script>
		<script language="javascript" type="text/javascript" src="./src/jscex-async-powerpack.js"></script>
	</head> 
	<body style="margin:0;padding:0">
        <!--上面的引入JS的路径你要写对，我是放在同目录下src文件夹下-->
        <canvas style="border:1px solid #c3c3c3;" id="myCanvas" width="800" height="600" >
                you browser do not support canvas.
        </canvas>
        </body>
</html>
这是用Jscex实现动画的非常简单的示例，包括Jscex的引入和使用示例。如果你感兴趣，可以访问老赵的博客还有一个是张磊的博客。]]> Jscex异步编程库，该库由国人 赵劼 开发。是开源的，你可以上https://github.com/JeffreyZhao/jscex免费获取到。如果你想进一步了解，请访问http://blog.zhaojie.me/tag/Jscex/来学习更多。

按照老赵的解释：Jscex的核心功能之一，便是对异步编程进行了极大程度的简化，帮助让开发人员摆脱异步编程方面烦恼，将注意力尽可能多地放在逻辑的表现上，而非异步编程过程中的各类奇技淫巧。

在Canvas上用，我理解的就是把JavaScript绘图，变换等操作按照时间轴显示出来，但是按照老赵的意思，貌似时间轴在表面上是用不到的。

如果要使用Jscex的异步编程库，先从github上获取Jscex的压缩包，解压后有src文件夹

然后在你的html文件中引入js

<script src="uglifyjs-parser.js"></script>
<script src="jscex-jit.js"></script>
<script src="jscex-builderbase.js"></script>
<script src="jscex-async.js"></script>
<script src="jscex-async-powerpack.js"></script>

当然，文件的目录你要写对。

下面代码是Jscex的简单示例，演示一个用Jscex从300，170的坐标点画300像素长的直线过程。

var canvas = document.getElementById("myCanvas");
var cxt = canvas.getContext("2d");
var line = {
	x: 300,
	y: 170,
	length: 300,
	width: 4
};

var lineAsync = eval(Jscex.compile("async", function () {
	try{
		cxt.lineWidth = line.width;
		cxt.moveTo(line.x,line.y);

		for(var i=0; i<line.length; i++){
		$await(Jscex.Async.sleep(10));
		line.x++;
		line.y++;
		cxt.lineTo(line.x,line.y);
		cxt.stroke();

		}
	} catch (e) {alert(e)}

		}));
lineAsync().start();

当然你也可以不用Jscex，但是你会看不到画的过程。以下是不用Jscex的示例：

var canvas = document.getElementById("myCanvas");
var cxt = canvas.getContext("2d");
var line = {
	x: 300,
	y: 170,
	length: 300,
	width: 4
};
cxt.lineWidth = line.width;
cxt.moveTo(line.x,line.y);
cxt.lineTo(line.x+300,line.y+300);
cxt.stroke();

HTML代码是：

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Canvas Test</title>
		<script language="javascript" type="text/javascript" src="./src/uglifyjs-parser.js"></script>
		<script language="javascript" type="text/javascript" src="./src/jscex-jit.js"></script>
		<script language="javascript" type="text/javascript" src="./src/jscex-builderbase.js"></script>
		<script language="javascript" type="text/javascript" src="./src/jscex-async.js"></script>
		<script language="javascript" type="text/javascript" src="./src/jscex-async-powerpack.js"></script>
	</head>
	<body style="margin:0;padding:0">
        <!--上面的引入JS的路径你要写对，我是放在同目录下src文件夹下-->
        <canvas style="border:1px solid #c3c3c3;" id="myCanvas" width="800" height="600" >
                you browser do not support canvas.
        </canvas>
        </body>
</html>

这是用Jscex实现动画的非常简单的示例，包括Jscex的引入和使用示例。如果你感兴趣，可以访问老赵的博客还有一个是张磊的博客。

原创文章，转载请注明： 转载自第十日

本文链接地址: Jscex异步编程库的 使用方法

]]> http://www.10thday.com/archives/jscex%e5%bc%82%e6%ad%a5%e7%bc%96%e7%a8%8b%e5%ba%93%e7%9a%84-%e4%bd%bf%e7%94%a8%e6%96%b9%e6%b3%95.html/feed 1 在Canvas里画随机圆形 http://www.10thday.com/archives/canvas2.html http://www.10thday.com/archives/canvas2.html#comments Mon, 26 Dec 2011 08:33:03 +0000 admin http://www.10thday.com/?p=13 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Canvas Test</title> </head> <body style="margin:0;padding:0"> <canvas style="border:1px solid #c3c3c3;" id="myCanvas" width="800" height="600" onmousemove="get_location(event)" ></canvas> <script type="text/javascript"> //Your browser does not support the canvas element. var c = document.querySelector('#myCanvas'); var cxt = c.getContext('2d'); function get_location(e){ //cxt.clearRect(0,0,800,600); x = e.clientX; y = e.clientY; var colors = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f']; var color = '#'; var brush = Math.random()*30; for (var i = 0; i < 6; i++) { //取得0-15之间的随机整数 index = Math.round(Math.random() * 15); color += colors[index]; } cxt.fillStyle=color; cxt.beginPath(); cxt.arc(x,y,brush,0,Math.PI*2,true); cxt.closePath(); cxt.fill(); } </script> </body> </html> 在过程中发现两个问题： 1，滚动鼠标后，y坐标获取位置有误 2，如何在点下并拖动鼠标后再绘制]]> 鼠标移动，绘出随机颜色随机大小的圆形，有码：

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Canvas Test</title>
	</head>
	<body style="margin:0;padding:0">

		<canvas style="border:1px solid #c3c3c3;" id="myCanvas" width="800" height="600" onmousemove="get_location(event)" ></canvas>

		<script type="text/javascript">
		//Your browser does not support the canvas element.
		var c = document.querySelector('#myCanvas');
		var cxt = c.getContext('2d');

		function get_location(e){

			//cxt.clearRect(0,0,800,600);
			x = e.clientX;
			y = e.clientY;

			var colors = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
			var color = '#';
			var brush = Math.random()*30;
			for (var i = 0; i < 6; i++) {
				//取得0-15之间的随机整数
				index = Math.round(Math.random() * 15);
				color += colors[index];
			}
			cxt.fillStyle=color;
			cxt.beginPath();
			cxt.arc(x,y,brush,0,Math.PI*2,true);
			cxt.closePath();
			cxt.fill();
		}
	</script>
	</body>
</html>

在过程中发现两个问题：

1，滚动鼠标后，y坐标获取位置有误
2，如何在点下并拖动鼠标后再绘制

原创文章，转载请注明： 转载自第十日

本文链接地址: 在Canvas里画随机圆形

]]> http://www.10thday.com/archives/canvas2.html/feed 1 用HTML5的Canvas画简单图形 http://www.10thday.com/archives/canvas1.html http://www.10thday.com/archives/canvas1.html#comments Mon, 26 Dec 2011 07:21:09 +0000 admin http://www.10thday.com/?p=9 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Canvas Test</title> </head> <body> <canvas style="border:1px solid #c3c3c3;" id="myCanvas" width="800" height="600" > Your browser does not support the canvas element.<!--这句是为了不支持HTML5的浏览器准备的--> </canvas> <script type="text/javascript"> //经过测试，这里的语句严格区分大小写，如果你发现什么在浏览器上什么也不显示，说不定就是应为大小写 var c = document.querySelector('#myCanvas');//通过ID获得Canvas， 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//这里用的是querySelector()，是HTML5的语句 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//你也可以继续用getElementById()，效果一样 var cxt = c.getContext('2d');//告诉Canvas这是2D绘图 cxt.fillStyle = "#FF0000";//把要填充的颜色设为红色 cxt.fillRect(0,0,150,75);//如果你想画一个矩形，就是用fillRect() cxt.moveTo(150,10);//设置绘图起始坐标 cxt.lineTo(150,150);//画线 cxt.lineTo(300,150); cxt.lineTo(300,300); cxt.stroke();//其实在这句之前的全部代码都是告诉浏览器我要画什么样的图形， //而你只有写上这句，才能看到你想要的图形 cxt.fillStyle="#00ffff"; cxt.beginPath();//开始绘制路径 cxt.arc(300,300,20,0,Math.PI*2,true);//这句是画圆， //arc的 参数 依次为：arc(in float x,in float y,in float radius,in float startAngle,in float endAngle,in boolean anticlockwise) //x,y代表要圆心坐标；radius：半径；startAngle，endAngle起始的角度和结束的角度，改变这个可以画弧；anticlockwise：是否使用逆时针方向绘图。 cxt.closePath();//结束绘制 cxt.fill();//填充上面设置的#00ffff颜色 </script> </body> </html> 上面的栗子只是用到了 绘制直线，矩形，圆以及设置颜色，填充 出了上面的函数，context对象还提供很多方法 列举一些 ： clecrRect(left,top,width,height)清除制定矩形区域。 fillRect(left,top,width,height)绘制矩形，并以fillStyle填充。 fillText（text,x,y）绘制文字。 strokeRect(left,top,width,height)绘制矩形，并以strokeStyle绘制边界。 beginPath():开启路径的绘制,重置path为初始状态。 closePath():绘制路径path结束，它会绘制一个闭合的区间，添加一条起始位置到当前坐标的闭合曲线。 moveTo(x，y)：设置绘图起始坐标。 lineTo(x，y);绘制从当前起始位置到坐标x，y直线。 fill()，stroke()，clip()：在完成绘制的最后的填充和边界轮廓，剪辑区域。 arc()：绘制弧,圆心位置、起始角度、终止角度来指定圆弧的位置和大小。 rect():矩形路径。 drawImage（Imag img）：绘制图片。 quadraticCurveTo():二次样条曲线路径,参数两个控制点。 bezierCurveTo()：贝塞尔曲线，参数三个控制点。 除了这些，还有很多绘制的方法。当然还有变换，变换更为强大。 不过我还没有学习到，所以暂时只能用到绘制。]]> HTML5中用的最多的就是Canvas了，从最简单的图形绘制到高级游戏，都离不开Canvas。
因为HTML5很火，借朋友的光，看了看他买的一本HTML5初级入门书，做了如下入门的Canvas画图。

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Canvas Test</title>
	</head>
	<body>
        <canvas style="border:1px solid #c3c3c3;" id="myCanvas" width="800" height="600" >
                Your browser does not support the canvas element.<!--这句是为了不支持HTML5的浏览器准备的-->
        </canvas>
        <script type="text/javascript">
		//经过测试，这里的语句严格区分大小写，如果你发现什么在浏览器上什么也不显示，说不定就是应为大小写
		var c = document.querySelector('#myCanvas');//通过ID获得Canvas，
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//这里用的是querySelector()，是HTML5的语句
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//你也可以继续用getElementById()，效果一样
		var cxt = c.getContext('2d');//告诉Canvas这是2D绘图
		cxt.fillStyle = "#FF0000";//把要填充的颜色设为红色
		cxt.fillRect(0,0,150,75);//如果你想画一个矩形，就是用fillRect()

		cxt.moveTo(150,10);//设置绘图起始坐标
		cxt.lineTo(150,150);//画线
		cxt.lineTo(300,150);
		cxt.lineTo(300,300);
		cxt.stroke();//其实在这句之前的全部代码都是告诉浏览器我要画什么样的图形，
                             //而你只有写上这句，才能看到你想要的图形

			cxt.fillStyle="#00ffff";
			cxt.beginPath();//开始绘制路径
			cxt.arc(300,300,20,0,Math.PI*2,true);//这句是画圆，
                        //arc的 参数 依次为：arc(in float x,in float y,in float radius,in float startAngle,in float endAngle,in boolean anticlockwise)
                        //x,y代表要圆心坐标；radius：半径；startAngle，endAngle起始的角度和结束的角度，改变这个可以画弧；anticlockwise：是否使用逆时针方向绘图。
			cxt.closePath();//结束绘制
			cxt.fill();//填充上面设置的#00ffff颜色
	</script>
</body>
</html>

上面的栗子只是用到了 绘制直线，矩形，圆以及设置颜色，填充
出了上面的函数，context对象还提供很多方法
列举一些 ：

clecrRect(left,top,width,height)清除制定矩形区域。

fillRect(left,top,width,height)绘制矩形，并以fillStyle填充。

fillText（text,x,y）绘制文字。

strokeRect(left,top,width,height)绘制矩形，并以strokeStyle绘制边界。

beginPath():开启路径的绘制,重置path为初始状态。

closePath():绘制路径path结束，它会绘制一个闭合的区间，添加一条起始位置到当前坐标的闭合曲线。

moveTo(x，y)：设置绘图起始坐标。

lineTo(x，y);绘制从当前起始位置到坐标x，y直线。

fill()，stroke()，clip()：在完成绘制的最后的填充和边界轮廓，剪辑区域。

arc()：绘制弧,圆心位置、起始角度、终止角度来指定圆弧的位置和大小。

rect():矩形路径。

drawImage（Imag img）：绘制图片。

quadraticCurveTo():二次样条曲线路径,参数两个控制点。

bezierCurveTo()：贝塞尔曲线，参数三个控制点。

除了这些，还有很多绘制的方法。当然还有变换，变换更为强大。

不过我还没有学习到，所以暂时只能用到绘制。

原创文章，转载请注明： 转载自第十日

本文链接地址: 用HTML5的Canvas画简单图形

]]> http://www.10thday.com/archives/canvas1.html/feed 1