html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="28.js"></script>
<style type="text/css">
body{ margin:0; padding:0;}
</style>
</head>
<body onLoad="draw('canvas')">
<canvas id="canvas" width='400' height="400"></canvas>
</body>
</html>
js
// JavaScript Document
var context;
var width,height;
var i;
function draw(id){
var canvas = document.getElementById(id);
context = canvas.getContext('2d');
width = canvas.width;
height = canvas.height;
setInterval(painting,100);
i = 0;
}
function painting(){
// context.fillStyle = "green";
// context.fillRect(i,i,10,10);
// context.fillRect(400-i,400-i,10,10);
// context.fillRect(400-i,400-i,10,10);
// context.fillRect(0,400-i,10,10);
context.fillStyle = "green";
context.fillRect(0,0,width,height);
context.clearRect(10,10,width,height);
context.fillStyle = "green";
context.fillRect(i,20,10,10);
i=i+20;
}
效果图：
相关推荐
第二部分 基础知识篇 第2章 canvas基本功能 / 20 2.1 绘制基本图形 / 20 2.1.1 画线 / 20 2.1.2 画矩形 / 22 2.1.3 画圆 / 24 2.1.4 画圆角矩形 / 26 2.1.5 擦除canvas画板 / 27 2.2 绘制复杂图形 / 28 ...
第3章 图形 28 3.1 Sim.js——一个轻量级的WebGL模拟框架 29 3.2 创建网格 30 3.3 使用材质、纹理和光源 34 3.3.1 光源的种类 35 3.3.2 使用多重纹理创建更具真实感的场景 37 3.3.3 纹理与透明 42 3.4...
第二部分 为iphone设计网页 第3章 为iphone重新开发网页22 3.1 iphone视区23 3.1.1 更改整站视区24 3.1.2 更改局部视区24 3.1.3 视区属性和常量25 3.2 实现“iphone友好的”网页26 3.2.1 避免缺少...
本书所附光盘范例 第4章（\C04） 示例描述：本章介绍LINQ的基本语法和使用。 UseQueryExpression 演示LINQ表达式语法的...第23章（\第23章） 示例描述：本章演示基本的WCF开发。 HelloWorld 第一个WCF程序。...
第2章 Canvas API 22 2.1 HTML5 Canvas概述 22 2.1.1 历史 22 2.1.2 canvas是什么 23 2.1.3 canvas坐标 23 2.1.4 什么情况下不用canvas 23 2.1.5 替代内容 24 2.1.6 CSS和canvas 25 2.1.7 浏览器对...
第15章 动画基础 349 15.1 理解WPF动画 349 15.1.1 基于时间的动画 349 15.1.2 基于属性的动画 350 15.2 基本动画 351 15.2.1 Animation类 351 15.2.2 使用代码创建动画 353 15.2.3 同时发生的动画 358 15.2.4 动画...
第15章 动画基础 349 15.1 理解WPF动画 349 15.1.1 基于时间的动画 349 15.1.2 基于属性的动画 350 15.2 基本动画 351 15.2.1 Animation类 351 15.2.2 使用代码创建动画 353 15.2.3 同时发生的动画 358 15.2.4 动画...
第1章 Android应用与开发环境 1 1.1 Android的发展和历史 2 1.1.1 Android的发展和简介 2 1.1.2 Android平台架构及特性 3 1.2 搭建Android开发环境 5 1.2.1 下载和安装Android SDK 5 1.2.2 安装...
第1章 Android应用与开发环境 1 1.1 Android的发展和历史 2 1.1.1 Android的发展和简介 2 1.1.2 Android平台架构及特性 3 1.2 搭建Android开发环境 5 1.2.1 下载和安装Android SDK 5 1.2.2 安装Eclipse和ADT插件 7 ...
第1章 Android应用与开发环境 1 1.1 Android的发展和历史 2 1.1.1 Android的发展和简介 2 1.1.2 Android平台架构及特性 3 1.2 搭建Android开发环境 5 1.2.1 下载和安装Android SDK 5 1.2.2 安装Eclipse和ADT插件 7 ...
/**【第二步】绘制当前进度的蓝色圆弧*/ drawArcRed(canvas, rectF); /**【第三步】绘制当前进度的白色数字*/ drawTextNumber(canvas, centerX); /**【第四步】绘制"本次步数"的灰色文字*/ drawTextStepString...
第1章 UI布局开发实例集锦 1 实例001： 使用线性布局（LinearLayout） 来布局屏幕 1 实例002： 使用相对布局（RelativeLayout）来布局屏幕 3 实例003： 使用表格布局（TableLayout） 来布局屏幕 5 实例004： 使用...
第二部分 数据访问 第7章 基础 7.1 ADO.NET架构 7.1.1 ADO.NET数据提供程序 7.1.2 ADO.NET的标准化 7.1.3 基本ADO.NET类 7.2 Connection类 7.2.1 连接字符串 7.2.2 测试连接 7.2.3 连接池 7.3 ...