javascript画版,js画中画

javascript如何实现把界面上的点，动态的依次连接成一个封闭的图形？

!DOCTYPE html

成都创新互联公司于2013年开始，是专业互联网技术服务公司，拥有项目成都网站建设、网站建设网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元固安做网站,已为上家服务,为固安各地企业和个人服务,联系电话:13518219792

html

head

meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=1.0,initial-scale=1.0,width=device-width" /

meta http-equiv="Content-Type" content="text/html; charset=utf-8"/

title/title

meta charset="utf-8" /

/head

body

svg width="200" height="200" viewBox="0 0 200 200"

path d="M20 20, L40 0, 60 20, 80 0, 60 40 Z" stroke="#0ff" stroke-width="1px" fill="#f0f"/path

/svg

/body

/html

这个是SVG实现，支持所有移动端，PC端除IE9以下不支持其他大部分也支持。

svg在html中就是用来绘制矢量图的，理论上任何图形都可以用svg画出来，同时他也和普通html对象一样，有自己的各种事件以及样式。

代码解析：svg标签，插入一个矢量图，宽度200px，高度200px。可视区域是从坐标0 0开始的200 * 200的正方形（说的很拗口。。）

path标签，定义一个路径，d属性定义了路径是啥样的，M20 20表示把起点移到X：20，Y：20的位置上， L40 0表示把这条线连接到X：40，Y：0的位置上，然后接着连接到X：60，Y：20位置再移动到X：80，Y：0在移动到X：60，Y：40，接着 Z表示把这个路径闭合，即从最后一个点X：60，Y：40再连接到起点X：20，Y：20的位置上。

stroke属性表示边框颜色，stroke-width表示边框宽度，fill表示填充颜色。

svg还有很多标签以及属性，不一一给你展示了。。

!DOCTYPE html

html

head

meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=1.0,initial-scale=1.0,width=device-width" /

meta http-equiv="Content-Type" content="text/html; charset=utf-8"/

title/title

meta charset="utf-8" /

/head

body

canvas width="200" height="200"/canvas

script type="text/javascript"

var canvas = document.getElementsByTagName("canvas")[0];

var context = canvas.getContext("2d");

context.fillStyle = "#f0f";

context.lineWidth = 1;

context.strokeStyle = "#0ff";

context.moveTo(20, 20);

context.lineTo(40, 0);

context.lineTo(60, 20);

context.lineTo(80, 0);

context.lineTo(60, 40);

context.fill();

/script

/body

/html

这个canvas效果一样的，但是他就是一个画板，里面画出来的东西是死的，没有交互的。。

代码自己参考svg再加上自己的理解搞吧

如何用canvas画板实现一个简单的球在盒子内反弹运动

1、创建Canvas画板

HTML5内声明一个Canvas画板很简单，只需要这样在HTML页面内加入一个canvas标签即可，需要定义其大小和id

view sourceprint?

1.canvas id="myCanvas" width="400" height="400"

2.对不起，你的浏览器不支持Canvas标签！

3./canvas

2、实现方案整理

要实现这样一个球在固定盒子内随机移动我们需要做到以下几点：

1）、画板大小固定；

2）、球大小固定且圆心位置随机；

3）、需要考虑球不出边界；

4）、通过setInterval(function(){},speed)方法实现时间间隔通过清空面板和重画模拟球的移动。

3、通过JavaScript操作画板

1）、初始化变量

view sourceprint?

1.//x和y为球的圆心坐标

2.//speed:表示球移动的速度 单位为毫秒

3.//radius:为球的半径

4.//width和height为盒子大小

5.var w, x,y, speed = 500, radius = 50, width = 400, height = 400;

2）、页面初始化绘制画板且设定时间间隔

view sourceprint?

01.//初始化

02.function init() {

03.drawCanvas();

04.setInterval(moveWheel, speed);

05.}

06.

07.//画盒子

08.function drawCanvas() {

09.//创建Canvas对象

10.var c = document.getElementById("myCanvas");

11.var ctx = c.getContext("2d");

12.//在画布面板上面创建一个矩形

13.ctx.fillStyle = "#000000"; //设置填充颜色值

14.ctx.fillRect(0, 0, width, height);

15.ctx.fill();

16.

17.w = ctx;

18.}

3）、随机移动球的实现

view sourceprint?

01.//随机移动球

02.function moveWheel() {

03.clearCanvas();

04.drawCanvas();

05.

06.//获得随机坐标

07.x = getRandomNum();

08.y = getRandomNum();

09.

10.//在画布上渲染一个圆形

11.w.fillStyle = '#FFFFFF';

12.w.beginPath();

13.w.arc(x, y, radius, 0, Math.PI * 2, true);

14.w.closePath();

15.w.fill();

16.}

4）、获取随机坐标数据

view sourceprint?

1.//获取随机数

2.function getRandomNum() {

3.return Math.random() * (width - radius * 2) + radius;

4.}

5）、清除画布

view sourceprint?

1.//清除画布

2.function clearCanvas() {

3.if (typeof w != "undefined") {

4.w.clearRect(0, 0, width, height);

5.}

6.}

完整示例代码如下所示：

view sourceprint?

01.!doctype html

02.html

03.head

04.titleHTML5标签Canvas画布练习轮子滚动/title

05.meta charset="UTF-8" /

06./head

07.body onload="init();"

08.h1Canvas 标签实现一个球限定在盒子内随机移动效果/h1

09.canvas id="myCanvas" width="400" height="400"

10.对不起，你的浏览器不支持Canvas标签！

11./canvas

12.script type="text/javascript" language="javascript"

13.//x和y为球的圆心坐标

14.//speed:表示球移动的速度 单位为毫秒

15.//radius:为球的半径

16.//width和height为盒子大小

17.var w, x,y, speed = 500, radius = 50, width = 400, height = 400;

18.

19.//初始化

20.function init() {

21.drawCanvas();

22.setInterval(moveWheel, speed);

23.}

24.

25.//画盒子

26.function drawCanvas() {

27.//创建Canvas对象

28.var c = document.getElementById("myCanvas");

29.var ctx = c.getContext("2d");

30.//在画布面板上面创建一个矩形

31.ctx.fillStyle = "#000000"; //设置填充颜色值

32.ctx.fillRect(0, 0, width, height);

33.ctx.fill();

34.

35.w = ctx;

36.}

37.

38.//随机移动球

39.function moveWheel() {

40.clearCanvas();

41.drawCanvas();

42.

43.//获得随机坐标

44.x = getRandomNum();

45.y = getRandomNum();

46.

47.//在画布上渲染一个圆形

48.w.fillStyle = '#FFFFFF';

49.w.beginPath();

50.w.arc(x, y, radius, 0, Math.PI * 2, true);

51.w.closePath();

52.w.fill();

53.}

54.

55.//清除画布

56.function clearCanvas() {

57.if (typeof w != "undefined") {

58.w.clearRect(0, 0, width, height);

59.}

60.}

61.

62.//获取随机数

63.function getRandomNum() {

64.return Math.random() * (width - radius * 2) + radius;

65.}

66./script

67./body

68./html

过多的代码解释这里就不罗嗦了，核心代码段均有注释，实在有什么不明白的地方随时留言。

如何用javascript做一个类似于画板中选颜色的那种颜色选择板?

颜色是由red green blue三种色调组成的

创建一个函数，实现RGB随机组合

然后拼一个table

javascript onLoad函数中canvas 画板上画不了图片 却可以画形状

Image加载图片是异步运行的，也就是说当你运行到ctx.drawImage(img,0,0,200,200);时，img中的图片还没有实际加载完毕，因此就会出现空白了（这种情况只在Chrome浏览器出现，FireFox中是正常的）。解决的办法就是要预加载图片，最简单的就是加个隐藏的img标签，比如：

img src="p2.gif" style="display:none" /

专业点的方法则要复杂一些，比如：

script type="text/javascript"

function init(){

var ctx=document.getElementById('canvas').getContext('2d');

preImage("p2.gif",function(){

ctx.drawImage(this,0,0,200,200);

});

ctx.fillRect(200,200,200,200);

}

function preImage(url,callback){

var img = new Image(); //创建一个Image对象，实现图片的预下载

img.src = url;

if(img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数

callback.call(img);

return; // 直接返回，不用再处理onload事件

}

img.onload = function () { //图片下载完毕时异步调用callback函数。

callback.call(img);//将回调函数的this替换为Image对象

};

}

/script

本文名称：javascript画版,js画中画
文章地址：http://6mz.cn/article/dssdood.html