用html5 canvas制作Windows7桌面图片

手把手教你用html5制作canvas制作Windows7桌面图片,看起来好高大上哈。这里主要是要突出制作一张Windows7桌面图片使用的工具很简单,也不是真正的手把手,因为这方面实在不是强项。用notepad++或者Windows自带的记事本什么的都可以。加上系统自带的浏览器(用了保存制作的图片)。 我并不是前端开发,是因为看了一个视频,感觉很有意思,所以就想玩玩。很多东西这里不能做解析,因此,代码也就不做注释了。这整个过程,会让你体验到html5在绘制图片的过程中,js通过计算,然后在浏览器上绘制出程序指定的图片时。浏览器输出有卡顿的感觉,反正我第一时间想到的就是计算机cpu消耗的问题了。还好,我是用chrome的,一般执行过一次后,可能是能够缓存吧,执行速度就相对快啦哈。 下面先看下制作好的效果:

3

2

1

三张图片主题都差不多,就是圈圈,大小不一的圆形。 下面是html5代码:
<!DOCTYPE html>
<html lang="zh-chm">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {padding: 0;margin:0;} .canvas { border:solid 1px #CCC; }
</style>
<script type="text/javascript">
function canvas(id){
 var canvas = document.getElementById(id);
 var context = canvas.getContext('2d');
 context.fillStyle = "#f0f1f2";
 var w = document.body.scrollWidth;
 var h = document.body.scrollHeight;
 context.fillRect(0,0,w,h); 
 for(var i=1;i<=7;i++){
 context.beginPath();
 context.arc(w/21.7,i*70,i*50,0,Math.PI*2,true);
 context.closePath();
 context.fillStyle = "rgba(255,0,0,0.09)";
 context.fill();
 context.strokeStyle = "#fff";
 context.stroke();
 
 context.beginPath();
 context.arc(w/13,(7-i)*50,1000/(7-i),0,Math.PI*2,true);
 context.closePath();
 context.fillStyle = "rgba(173, 255, 47,0.08)";
 context.fill();
 context.strokeStyle = "#0f0";
 context.stroke();
 
 context.beginPath();
 context.arc(w/1.5,50*(7-i)*i,700/(7-i),0,Math.PI*2,true);
 context.closePath();
 context.fillStyle = "rgba(225,225,250,0.09)";
 context.fill();
 context.strokeStyle = "#000";
 context.stroke();
 
 context.beginPath();
 context.arc(w/2,50*(i+2),1000/(7-i)*2,0,Math.PI*2,true);
 context.closePath();
 context.fillStyle = "rgba(255,140,0,0.09)";
 context.fill();
 context.strokeStyle = "red";
 context.stroke();
 
 context.fillStyle = "rgba(250,228,0,0.15)";
 context.font = "normal 450% Helvetica, Arial, sans-serif"
 context.fillText("2016 By Apinst...",w/1.7,h/1.1);
 }
}
</script>
<title>canvas绘制圆形</title>
</head>
<body onload="canvas('canvas')">
<section>
<canvas id="canvas" class="canvas" width="1366px" height="768px">
</canvas>
</section>
</body>
</html>
第一次编辑js代码,感觉也没有想象中的复杂,只不过,要实现复杂的功能和优化可能就是不那么简单了。下面才是重点: Html5使用canvas画布绘制图片: 1.html页面body上面抛瞄:body onload="canvas('canvas')">发现此代码放在别处不行。可能是姿势不对。 2.图片中都是画了好多好多的圆形,其中圆圈也只是边框而已,还是圆形的一部分,就是控制边框的颜色来实现的。那么画好多的圆肿么办?请使用神奇的for循环。圆形大小不一,这里就使用了for循环的变量i。圆面积=PI*R^2。这里用R来关联变量i,使这个整体在变化,便可实现大小不一的圆形了。 3.最后是font字体的问题,看上面js代码,画布上绘制文字也是听简单哈,但其实很多这里也没有体现出来。因为我对这个太不敏感了。因此,不在其职,不谋其为哈。留个大家发掘。 最后,美感不强,并不知道这样的壁纸好不好看,只是分辨率那样的大小,加了几个圈圈,不过还是好有成就感。有这种事情估计也是QQ管家的错,反正最近重装了2次Windows7系统,我一直使用Windows7自带的那张壁纸总会消失不见。因此,当用html5的canvas绘制了图片后就萌生了制作成壁纸的想法。

上一篇Previous

论自主IDC运维

下一篇Next

有足够的理由放弃简书

10 条评论添加评论

漂亮。补充一下,都玩了这么久了,nof活着fo也没必要太注重了。

回复取消回复
@tiandi

什么就是nof和fo啊。[大哭]

回复取消回复

侧边栏评论小工具有问题,都是FROYO的。。

回复取消回复
@wordpress优化

嗯,更新了wordpress 4.4.0之后就变成这样了,也没有去寻找原因。

回复取消回复

才发现你的评论链接没加Nofollow

回复取消回复
@wordpress优化

看来你是有解决办法呀。哈哈~指教下呀。你是说评论要加nofollow吗?

回复取消回复
@酷特尔

找找主题评论输出的地方,链接上加nofollow试试

回复取消回复
@FROYO

最近都没什么心情加上没空折腾,不理它先。总感觉源程序就坏坏的了。

回复取消回复

厉害,有空试试

回复取消回复
@FROYO

哈哈~就是感觉新鲜。要画出复杂的图片也不是很容易啊。

回复取消回复