文档章节

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;

    }
}


© 著作权归作者所有

共有 人打赏支持
cnsytem
粉丝 1
博文 44
码字总数 10384
作品 0
浦东
程序员
史无前例的 HTML5 资源参考指南

尽管 HTML5 规范在 2014 年之前不会有正式版本,很多设计师已经开始试水高级浏览器已经支持的部分 HTML5 功能。HTML5 为 Web 设计和应用开发打开了一扇全新的门,原生支持了以前只可能使用 ...

李长春
2012/03/02
0
1
精选9个值得学习的 HTML5 效果【附源码】

这里精选了一组很酷的 HTML5 效果。HTML5 是现 Web 开发领域的热点, 拥有很多让人期待已久的新特性,特别是在移动端,Web 开发人员可以借助 HTML5 强大功能轻松制作各种交互性强、效果丰富的...

赵小宾
2014/11/27
0
0
给网页设计师的30个HTML5学习资源

早在几个星期前,Adobe就发布了Dreamweaver CS5 HTML5 Pack的预览版下载。众所周知,HTML5在互联网领域掀起了一场大论战,并让Adobe的日子很难熬。HTML5致力于为前端开发提供全面的标记语 言...

晨曦之光
2012/03/09
0
0
推荐六款炫酷的HTML5效果插件

1. HTML5 3D图片阴影翻转动画 效果很酷 分享一款很酷的HTML5 3D动画特效,这款3D特效可以为你的图片增加阴影的效果,而且可以让图片在鼠标滑过的时候出现3D翻转的动画效果。这和HTML5 3D动画...

tower1229
06/26
0
0
超级绚丽,20款前端动画特效,轰炸你的眼睛

前言 HTML5一个相当出色的web技术,它不仅可以让你更加方便地操纵页面元素,而且可以通过canvas实现更多的动画特效,引进HTML5标准后,CSS3也就可以发挥更大的作用。本文主要介绍了一些基于H...

浪漫程序员
04/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

MySQL 乱七八糟的可重复读隔离级别实现

MySQL 乱七八糟的可重复读隔离级别实现 摘要: 原文可阅读 http://www.iocoder.cn/Fight/MySQL-messy-implementation-of-repeatable-read-isolation-levels 「shimohq」欢迎转载,保留摘要,谢...

DemonsI
49分钟前
2
0
Spring源码阅读——2

在阅读源码之前,先了解下Spring的整体架构: 1、Spring的整体架构 1. Ioc(控制反转) Spring核心模块实现了Ioc的功能,它将类与类之间的依赖从代码中脱离出来,用配置的方式进行依赖关系描...

叶枫啦啦
今天
1
0
jQuery.post() 函数格式详解

jquery的Post方法$.post() $.post是jquery自带的一个方法,使用前需要引入jquery.js 语法:$.post(url,data,callback,type); url(必须):发送请求的地址,String类型 data(可选):发送给后台的...

森火
今天
0
0
referer是什么意思?

看看下面这个回答(打不开网页可以把网址复制到搜索栏): https://zhidao.baidu.com/question/577842068.html

杉下
今天
1
0
使用U盘安装CentOS-解决U盘找不到源

1. 使用UltraISO制作CentOS安装盘 如果需要安装带界面的系统,为保证安装顺利,可选择Everything版本的ISO制作安装盘。 2. 在BIOS中选择使用U盘安装 系统启动后,进入安装选择界面,其中有三...

Houor
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部