canvas做的桌面

效果图

<a href="http://s3.51cto.com/wyfs02/M00/8C/F5/wKiom1h_PGbiWkjxAAKfAHBIIkA839.png-wh_500x0-wm_3-wmp_4-s_1343390051.png" target="_blank"></a>

html结构

&lt;!DOCTYPE html&gt;

&lt;html&gt;

&lt;head&gt;

&lt;meta charset="utf-8"&gt;

&lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;

&lt;title&gt;canvas33&lt;/title&gt;

&lt;link rel="stylesheet" href=""&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;canvas id="canvas" style ="border:1px solid #aaa;diplay:block;margin:50px auto;"&gt;

当前浏览器不支持canvas,请更换浏览器后再试

&lt;/canvas&gt;

&lt;/body&gt;

&lt;/html&gt;

js脚本

&lt;script&gt;

window.onload = function(){

var canvas = document.getElementById("canvas");

canvas.width  = 1200;

canvas.height = 800;

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

context.globalAlpha = 0.8;

for(var i = 0;i&lt;100;i++){

var R = Math.floor(Math.random()*255);

var G = Math.floor(Math.random()*255);

var B = Math.floor(Math.random()*255);

context.fillStyle = "rgb("+R+","+G+","+B+")";

context.beginPath();

context.arc(Math.random()*canvas.width,Math.random()*canvas.height,Math.random()*100,0,Math.PI*2);

context.fill();

}

&lt;/script&gt;

本文转自  素颜猪  51CTO博客，原文链接:本文转自  素颜猪  51CTO博客，原文链接: