<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>每天一个JavaScript实例-canvas绘图</title>

<style>

	.canvas{

		width:600px;

		height:500px;

	}

</style>

<script>

window.onload = function(){

	var imgcanvas = document.getElementById("imgcanvas");

	if(imgcanvas.getContext){

		var ctx = imgcanvas.getContext('2d');

		ctx.fillStyle="rgba(255,0,0,.1)";

		ctx.strokeStyle = "#000";

		//第一个

		ctx.fillRect(0,0,100,100);

		ctx.strokeRect(0,0,100,100);

		//第二个

		ctx.fillRect(50,50,100,200);

		//第三个

		ctx.strokeRect(80,130,200,100);

	}

}

</script>

</head>

<body>

<canvas class="canvas" id = "imgcanvas">

<p>画布</p>

</canvas>

</body>

</html>

每天一个JavaScript实例-canvas绘图的更多相关文章

  1. 每天一个JavaScript实例-从一个div元素删除一个段落

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. 每天一个JavaScript实例-推断图片是否载入完毕

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  3. 每天一个JavaScript实例-动态省份选择城市

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. 每天一个JavaScript实例-递归实现反转数组字符串

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. 每天一个JavaScript实例-html5拖拽

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. 每天一个JavaScript实例-防止反复表单提交

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. 每天一个JavaScript实例-展示设置和获取CSS样式设置

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. 每天一个JavaScript实例-apply和call的使用方法

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. 每天一个JavaScript实例-获取元素当前高度

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. Robotium原则的实施源代码分析

    从前面的章节<Robotium源代码分析之Instrumentation进阶>中我们了解到了Robotium所基于的Instrumentation的一些进阶基础.比方它注入事件的原理等,但 ...

  2. linux下查找某个文件

    参考http://blog.csdn.net/gray13/article/details/6365654 一.通过文件名查找法: 举例说明,假设你忘记了httpd.conf这个文件在系统的哪个目录 ...

  3. Delphi XE7 发布时间

    Delphi7 XE7 我可以下载: http://altd.embarcadero.com/download/radstudio/xe7/delphicbuilder_xe7_win.iso 安装包 ...

  4. lock订单号

    常见误用场景:在订单支付环节中,为了防止用户不小心多次点击支付按钮而导致的订单重复支付问题,我们用 lock(订单号) 来保证对该订单的操作同时只允许一个线程执行. 这样的想法很好,至少比 lock( ...

  5. Docker镜像与容器命令（转）

    Docker是一个开源的引擎,可以轻松的为任何应用创建一个轻量级的.可移植的.自给自足的容器.开发者在笔记本上编译测试通过的容器可以批量地在生产环境中部署,包括VMs(虚拟机).bare metal. ...

  6. iOS 真机调试(最具体的步骤来解决历史,hmt精心打造)

    /*************************************************************1************************************* ...

  7. Matlab强迫症产生的图像

    最近流行的网络迷恋的照片做头像,闲来无事,取matlab获取一个建设者,它可以产生包括0-9以及99+OCD. 原理很easy,图叠加,这里为了降低文件,将数字图片保存在.mat二进制文件里. === ...

  8. 乐在其中设计模式(C#) - 工厂方法模式(Factory Method Pattern)

    原文:乐在其中设计模式(C#) - 工厂方法模式(Factory Method Pattern) [索引页][源码下载] 乐在其中设计模式(C#) - 工厂方法模式(Factory Method Pa ...

  9. java通讯录

    )设一个通信录由以下几项数据信息构成: 数据项               类型 姓名                  字符串 地址                  字符串 邮政编码        ...

  10. iphone内容开发技术学习

    一.iOS基础 1 开发环境搭建以及IOS组件.框架的概要介绍. 2 mac操作系统与iOS操作系统 3 xcode IDE开发环境的初始 二.C语言基础 1数据类型.表达式与控制流程语句 2数组.函 ...