`
wjlgryx
  • 浏览: 307060 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

html5 demos-渐变

HTML5 
阅读更多

<html>
<head>
<title>Canvas</title>
<script>
window.onload = function(){
var elem = document.createElement("canvas");
elem.width = 500;
elem.height = 500;
document.body.appendChild( elem );

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

context.fillRect(0, 0, elem.width, elem.height);

var pos = 0, dir = 1;

setInterval(function(){
context.rotate( 15 );

context.fillStyle = "rgba(0,0,0,0.05)";
context.fillRect(0, 0, elem.width, elem.height);

context.fillStyle = "rgba(255, 0, 0, 1)";
context.fillRect(pos, pos, 20, 20);

pos += dir;

if ( pos > elem.width ) {
dir = -1;
} else if ( pos + 20 < 0 ) {
dir = 1;
}
}, 10);
};
</script>
</head>
<body></body>
</html>
分享到：
| webGL 第一个demos
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Html5_canvas_demos

    "Html5_canvas_demos"这个压缩包很可能是包含了一系列使用HTML5 Canvas技术实现的示例代码，旨在帮助开发者学习和理解Canvas API的用法。 HTML5 Canvas的API提供了一组JavaScript方法，通过这些方法，开发者可以像...

    html5demoscss.rar

    HTML5和CSS3是现代网页设计的两大核心技术，它们共同为网页带来了丰富的功能和美观的视觉效果。HTML5（超文本标记语言第五版）着重于提高网页内容的语义性和可访问性，而CSS3（层叠样式表第三版）则专注于页面布局、...

    TMS component控件的Demos

    1. **AdvSmoothLabel**：这是一个高级标签控件，提供平滑的文字渲染和自定义样式，可以实现文字阴影、渐变色等效果，增强界面的视觉吸引力。 2. **AdvComboBox**：与标准的ComboBox相比，AdvComboBox提供了更多的...

    colorpicker:带有可选渐变停止的jQuery UI Colorpicker小部件

    颜色选择器jQuery UI选色器小部件和渐变停止小部件例子请参阅demos目录中的colorpicker.html和gradient.html关于无法找到我喜欢的拾色器后，我决定创建自己的拾色器。 随后，我为渐变色选择器小部件添加了选项。 ...

    some-demos:记录一些demo

    Some-Demos 记录工作中写的一些demo，不断更新吧... Demo preview CSS3 filter10种特效整理 仿微信可换肤CSS3美化表单 背景Canvas 3D线条动画特效 Css3渐变 Css3-clip Css3-clip-path Css3-loading circle-animation...

    canvas-animation-demos:打字稿中的画布动画

    该动画基于的示例星座具有一些简单物理学的数量（默认为100）的恒星/粒子在宇宙中漂移（渐变色背景）。 星座模型类可以采用恒星/粒子的配置。 此动画基于 。 糖果文字参数化的文本字符串由彩色粒子创建。 当鼠标...

    前端项目-granim.zip

    5. `examples`或`demos`目录：可能包含多个示例文件，展示不同的渐变动画效果和用法。 6. `docs`或`readme.md`：文档或README文件，提供了关于如何使用Granim.js的详细说明和教程。 在使用Granim.js时，开发者需要...

    css3PIE(编译后的可用)

    5. **版本管理**：文件名`lojjic-PIE-34154b1`很可能表示这是CSS3PIE的一个版本号。版本号中的数字和字母组合可能指的是项目的Git提交哈希值，这有助于追踪和管理代码的更新和变化。 6. **浏览器兼容性**：虽然CSS3...

    Agama Web Buttons

    - **按钮设计**：软件提供了一套完整的工具集，包括形状、颜色、阴影、渐变、纹理等效果，允许用户自由调整按钮的外观和感觉。 - **模板使用**：预设的按钮模板可以节省时间，用户只需根据需求进行微调，快速生成...

    Graphe：网站上的图形绘制工具

    在Graphe中，CSS用于定制图形的外观，如边框、填充色、渐变、阴影等，使得图形更加美观且符合网页的整体风格。 Graphe可能还利用了CSS3的一些新特性，例如选择器的增强、伪类和伪元素、多列布局、过渡和动画、以及...

    L.gmxHeatMapWebGL:gmxHeatMapWebGL - 使用 WebGL for Geomixer 的高性能 Javascript 热图插件

    它与 HTML5 的 Canvas 元素集成，通过 JavaScript 接口调用，使得浏览器可以直接处理复杂的图形计算，提高了性能和用户体验。 2. **Geomixer**: Geomixer 是一个强大的在线地图创作平台，它提供了丰富的地图数据...

Magicbox
Global site tag (gtag.js) - Google Analytics