!DOCTYPE html
创新互联是一家专注于网站设计、成都网站建设与策划设计,井冈山网站建设哪家好?创新互联做网站,专注于网站建设十载,网设计领域的专业建站公司;建站业务涵盖:井冈山等地区。井冈山做网站价格咨询:028-86922220
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再加上自己的理解搞吧
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
颜色是由red green blue三种色调组成的
创建一个函数，实现RGB随机组合
然后拼一个table
