甜橘子，专注成都网站制作网站设计与营销型网站建设与优化
QQ :532337155
电话：028-86922220
!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再加上自己的理解搞吧
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
过多的代码解释这里就不罗嗦了，核心代码段均有注释，实在有什么不明白的地方随时留言。
颜色是由red green blue三种色调组成的
创建一个函数，实现RGB随机组合
然后拼一个table
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