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. **第二章**: 绘制路径 这章可能讲解如何绘制复杂路径，使用`beginPath()`, `moveTo()`, `lineTo()`, `bezierCurveTo()`等方法，以及如何填充和描边路径。 3. **第三章**: 图像处理 可能会介绍如何在Canvas上...
HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行动态图形绘制，提供了丰富的API接口，使得创建交互式或动画效果成为可能。在HTML5 Canvas开发详解（第2版）中，作者深入浅出地介绍了Canvas的各个...
第二部分 基础知识篇 第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 ...
第二章：工作界面与设置 深入解析Flash的工作界面，包括时间轴、舞台、工具箱和属性面板等组成部分。同时，指导学习者如何自定义工作区和调整软件设置，以适应个人的工作习惯。 第三章：绘图工具 详细讲解Flash的...
##### 第 28 章：播放音频和视频 多媒体支持是现代应用程序不可或缺的一部分。本章介绍了 JavaFX 中的音频和视频播放功能。 ##### 第 29 章：理解 FXML FXML 是 JavaFX 的一种声明式 UI 定义语言。本章介绍了 FXML ...
2. **第二章：Hello, Android** - 第一个Android程序：讲解如何编写“Hello, World”程序，理解AndroidManifest.xml的作用。 - 活动（Activity）与生命周期：介绍Activity的基本概念，以及启动、暂停、恢复和销毁...
讲解如何在Android中处理2D图形，包括使用Canvas进行绘制，以及如何实现帧动画和补间动画，这对于游戏中的角色移动、场景切换等视觉效果至关重要。 第四章：游戏框架与库 介绍一些常用的Android游戏框架，如libGDX...
- **第36章：使用画布元素（第二部分）**：深入探讨了`<canvas>`元素的高级绘图技巧。 - **第37章：拖放功能**：讲解了HTML5中新增的拖放API，以及如何实现文件拖放到网页等功能。 - **第38章：地理定位**：介绍了...
- **AJAX与Comet**：第二十一章深入探讨了异步通信技术，特别是AJAX请求以及Comet（服务器推送）模式的实现方式。 #### 十一、客户端存储与离线应用 - **本地存储**：第二十三章关注客户端存储技术的发展，介绍了...
本书所附光盘范例 第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 浏览器对...
### 第二章：设计用户界面 本章重点介绍了设计美观且用户友好的界面所需的知识和技能。它涵盖了如何使用HTML、CSS和JavaScript来构建响应式布局，确保应用在不同的屏幕尺寸和方向下都能保持良好的视觉效果和用户...
- **第二章：Android的开发环境** - 内容简介：这一章节详细讲解了如何搭建Android开发环境，包括安装必要的软件和工具，以及创建第一个Android项目。 - 核心知识点： - 开发工具的选择：如Android Studio、...
2. **第二章**：可能会讲解HTML5的表单控制，如`<input type="date">`、`<input type="range">`等，以及`<form>`元素的新属性，如`required`、`pattern`等，它们提高了用户输入验证的便利性。 3. **第三章**：HTML5...