十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
!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