<!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. php按照奖品百分比随机抽奖代码分析

    这个忘记从哪里copy过来了 /** * 概率算法 * @param array $probability * @return integer|string */ function get_rand( ...

  2. 怎样配置nginx同一时候执行不同版本号的php-fpm

    在/usr/local/php/etc/php-fpm.conf里找到 listen = 127.0.0.1:9000 将port9000改动为9001 在对应的nginx配置里也做相同的port改动

  3. 呈现怎样的香蕉饼路线Android系统

    无话可说,该系统的第一版,Android有的还可以,路由设置确实有闪光现象背.与其他的稳定版本发布,被能够机顶盒和路由组合.其次是SSD,还是很不错的. 硬件 watermark/2/text/aHR ...

  4. hdu1978--How many ways(内存搜索)

    How many ways Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) To ...

  5. WCF扩展之实现ZeroMQ绑定和protocolBuffer消息编码（一）概要设计

      在我工作的项目中含有多种操作系统.多种设备.多种开发语言,因此需要使用跨平台的通信技术和自定义的消息编码.经过技术调研,ZeroMQ+ProtocolBuffer最终成为通信技术和编码方式.但是如 ...

  6. SQL集合运算 差集 并集 交

    SQL-3标准中提供了三种对检索结果进行集合运算的命令:并集UNION:交集INTERSECT:差集EXCEPT(在Oracle中叫做 MINUS).在有些数据库中对此的支持不够充分,如MySql中只 ...

  7. 《实验数据的结构化程序设计》 2.4.4Calendar个人意见，寻求指引

    题目大意: 制作一个日历系统,输入年份.一些周年纪念日,及服务要求日期,依据要求日期输出,输出重要程度小于发生日期的周年纪念日. 题目地址: UVA  145 个人见解: 纯模拟,在闰年,输出顺序及输 ...

  8. Easyui 异步树直接所有展开

    初始化异步树直接所有展开代码: $(function(){ $('#tt').tree({ url:'<%=request.getContextPath()%>/treeInit', li ...

  9. OS调度算法常用摘要

    一.常见的批处理作业调度 1.先来先服务调度算法(FCFS):就是依照各个作业进入系统的自然次序来调度作业.这样的调度算法的长处是实现简单,公平. 其缺点是没有考虑到系统中各种资源的综合使用情况,往往 ...

  10. SpringMVC 上下文webApplicationContext

    使用listener听众载入配置,一般Struts+Spring+Hibernate是使用listener监听器的.例如以下 <listener> <listener-class&g ...