文档章节

html5 canvas test

cnsytem
 cnsytem
发布于 2013/12/30 14:20
字数 156
阅读 28
收藏 0

今天初试了下三原色在html5上的合成过程:

index.html:

<!DOCTYPE html>
<html>
<head>
    <title>canvasflower</title>
    <script src="script.js"></script>
</head>
<body onload="mplay">
    <div id="display">
        <canvas id="flow" style="width:1200px;height: 600px"> </canvas>
    </div>
</body>
</html>

script.js

/**
 * Created by keejun on 13-12-30.
 */
x=1;
j=9;
k=0;
var mplay=setInterval('play();',1000);
function play(){
    var canvas=document.getElementById("flow");
    if(canvas==null){
        alert("no such elements")
    }
    else{
        if(j<1){
            clearInterval(mplay);
            window.location=canvas.toDataURL("image/jpeg");
         }
        var context=canvas.getContext("2d");
        context.moveTo(150,150);
        context.beginPath();
        context.arc(150,15*9-j*15,j*10,0,Math.PI*2,true);
        context.closePath();
        context.fillStyle="rgba(255,0,0,0.15)";
        context.fill();

        context.beginPath();
        context.arc(150+k*9,15*8,(k+1)*10,0,Math.PI*2,true);
        context.closePath();
        context.fillStyle="rgba(0,255,0,0.25)";
        context.fill();

        context.beginPath();
        context.arc(150-k*9,15*8,(k+1)*10,0,Math.PI*2,true);
        context.closePath();
        context.fillStyle="rgba(0,0,255,0.25)";
        context.fill();
      
        j=j-1;
        k=k+1;

    }
}


© 著作权归作者所有

共有 人打赏支持
上一篇: 字典正则表达式
下一篇: python re 模块 1
cnsytem
粉丝 1
博文 44
码字总数 10384
作品 0
浦东
程序员
私信 提问
10 在线工具用来简化 HTML5 编码

HTML5 肯定是会彻底改变我们创建的网站和Web应用程序。在这篇文章中,编制了10个非常强大的工具,以简化和增强你的HTML5的编码。 Initializr Initializr会为你生成一个干净的可定制的模板,基...

红薯
2011/08/16
3.1K
3
推荐10款非常优秀的HTML5开发工具

HTML5发展如火如荼,随着各大浏览器对HTML5技术支持的不断完善以及HTML5技术的不断成熟,未来HTML5必将改变我们创建Web应用程序的方式。今天这篇文章向大家推荐10款优秀的HTML5开发工具,帮助...

长平狐
2012/10/09
156
0
推荐10款非常优秀的HTML5开发工具

HTML5发展如火如荼,随着各大浏览器对HTML5技术支持的不断完善以及HTML5技术的不断成熟,未来HTML5必将改变我们创建Web应用程序的方式。今天这篇文章向大家推荐10款优秀的HTML5开发工具,帮助...

红薯
2011/10/09
74.4K
13
推荐 10 个优秀的 HTML5 编码工具

HTML5将彻底改变我们建设网站和Web应用程序的方式。这里有10个伟大的工具,用于简化和提高HTML5的编码。 假如你才刚开始利用HTML5来创建网站,可访问Initializr来入门。这个网站将帮您根据样...

小编辑
2011/08/22
3.2K
8
16 款加速编码的 HTML5 在线工具

HTML5 是在开发者和设计者之间最流行的语言之一,提供了大量的功能来帮助开发者们快速的设计 web 应用。HTML5 有很多特性,例如支持现代化的浏览器(比如:Firefox 6,Google Chrome,IE9 等...

oschina
2014/01/20
4.1K
3

没有更多内容

加载失败,请刷新页面

加载更多

MicroStation Developer Shell

REG ADD HKLM\SOFTWARE\Microsoft\VisualStudio\8.0\Setup\VS /v ProductDir /t REG_SZ /d "C:\Program Files (x86)\Microsoft Visual Studio 8\VC\" /reg:32 CALL "C:\Program Files (x86)\......

oready
10分钟前
1
0
CURL常用命令

下载单个文件,默认将输出打印到标准输出中(STDOUT)中 curl http://www.centos.org 通过-o/-O选项保存下载的文件到指定的文件中: -o:将文件保存为命令行中指定的文件名的文件中 -O:使用U...

SuShine
15分钟前
1
0
docker搞个wordpress

1.先把wordpress的镜像下载下来 docker pull wordpress 2.下载mysql docker pull mysql:lastest 3.启动mysql docker run --name some-mysql -e MYSQL_ROOT_PASSWORD=my-secret-pw -d mysql:t......

无极之岚
26分钟前
2
0
【宇润日常疯测-005】PHP 中的 clone 和 new 性能比较

clone和new本不应该放在一起比较,它们的作用是不同的。但可能有一些场景下,可以用clone也可以用new,那么这时候我们选哪个呢? 我编写了两个测试,第一个是声明一个空类,第二个是带构造方...

宇润
27分钟前
2
1
点击按钮弹出类似IOS 底部 dialog

implementation 'com.baoyz.actionsheet:library:1.1.7' 然后设置按钮点击监听,,调用下列代码即可 ActionSheet.createBuilder(this, getSupportFragmentManager()) ......

lanyu96
30分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部