使用html制作圆弧正方形,JavaScript+html5 canvas制作的圆中圆效果实例

本文实例讲述了JavaScript+html5 canvas制作的圆中圆效果。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

demo

#canvas {

background:#F2F2F2; height:500px; height:500px; margin-top:100px; margin-left:200px;

}

(function() {

var dyl = {};

dyl.getDom = function(id) {

return document.getElementById(id);

}

dyl.getContext = function(canvasID) {

var canvas = this.getDom(canvasID);

if(!canvas) {

return null;

}

return canvas.getContext("2d");

}

if(!window.dyl) {

window.dyl = dyl;

}

})();

cache = {};

cache.context = dyl.getContext('canvas');

// 每个圈的圆个数控制

cache.scaleNmb = 6;

cache.createColor = function() {

var color = "rgb(";

color += Math.round(Math.random()*255);

color += ",";

color += Math.round(Math.random()*255);

color += ",";

color += Math.round(Math.random()*255);

color += ")";

return color;

};

cache.draw = function() {

cache.context.fillRect(-10, -10, 20, 20);

for(var i=1; i<10; i++) {

cache.context.save();

for(var j=0; j

cache.context.rotate(Math.PI*2/(cache.scaleNmb*i));

cache.context.fillStyle = cache.createColor();

cache.context.beginPath();

cache.context.arc(0, 20*i, 5, 0,Math.PI*2, true);

cache.context.closePath();

cache.context.fill();

}

cache.context.restore();

}

};

cache.init = function() {

cache.context.translate(250, 250);

cache.draw();

};

cache.init();

更多关于js特效相关内容感兴趣的读者可查看本站专题：《jQuery动画与特效用法总结》、《jQuery常见经典特效汇总》及《JavaScript动画特效与技巧汇总》

希望本文所述对大家JavaScript程序设计有所帮助。

时间： 2016-01-24

使用html制作圆弧正方形,JavaScript+html5 canvas制作的圆中圆效果实例相关推荐

html制作状态栏数字时钟,html5 canvas制作15种数字时钟样式代码
特效描述:html5 canvas制作数字时钟样式.html5 canvas数字时钟代码代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 clockd1_={ "indic ...
html制作windows桌面,用html5 canvas制作Windows7桌面图片
手把手教你用html5制作canvas制作Windows7桌面图片,看起来好高大上哈.这里主要是要突出制作一张Windows7桌面图片使用的工具很简单,也不是真正的手把手,因为这方面实在不是强项.用n ...
html5基于canvas制作酷炫,应用HTML5 Canvas制作酷炫科技背景动画特效
更多特效代码请添加HTML5前端交流群111645711 看这性感的线条,激情的律动! 废话不多说,上代码! 源代码需要文档版本源码,可以加我的HTML5前端交流群111645711 * { mar ...
html弧形列表效果,JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
本文实例讲述了JavaScript+html5 canvas绘制的圆弧荡秋千效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: demo #canvas { margin:50 ...
[译]怎样用HTML5 Canvas制作一个简单的游戏
这是我翻译自LostDecadeGames主页的一篇文章,原文地址:How To Make A Simple HTML5 Canvas Game. 下面是正文: 自从我制作了一些HTML5游戏(例如C ...
html5在线制作教程,HTML5 Canvas 制作动画
HTML5 Canvas 制作动画在HTML5 canvas中绘制图像动画效果,你需要绘制出每一帧的图像,然后在一个极短的时间内从一帧过渡到下一帧,形成动画效果. 在线示例要在HTML5画布上绘制 ...
html5上色游戏制作,怎样用HTML5 Canvas制作一个简单的游戏
原文连接: How To Make A Simple HTML5 Canvas Game 自从我制作了一些HTML5游戏(例如Crypt Run)后,我收到了很多建议,要求我写一篇关于怎样利用HTML ...
html5时间画布走动,javascript+HTML5 canvas绘制时钟功能示例
本文实例讲述了javascript+HTML5 canvas绘制时钟功能.分享给大家供大家参考,具体如下: 效果如下: 代码: www.jb51.net canvas绘制时钟 div{text-ali ...
html 圆圈透明其他不透明,Javascript HTML5 Canvas绘制透明圆圈
我需要有一个函数在画布上绘制几个圆圈,从mousedown at center = x,y开始,并将鼠标拖动到deltaX,deltaY,从而为每个圆圈创建半径r.圆圈无法填充(需要它们透明),因此用 ...

使用html制作圆弧正方形,JavaScript+html5 canvas制作的圆中圆效果实例

使用html制作圆弧正方形,JavaScript+html5 canvas制作的圆中圆效果实例相关推荐

最新文章

热门文章