<!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. Linux学习笔记——例说makefile 头文件查找路径

    0.前言     从学习C语言開始就慢慢開始接触makefile,查阅了非常多的makefile的资料但总感觉没有真正掌握makefile,假设自己动手写一个makefile总认为非常吃力.所以特意借 ...

  2. Mvc后台接收 参数

    @Html.TextAreaFor(m => m.Emps, new { @class = "easyui-validatebox", @style = "heig ...

  3. Linux - SVN下载项目

    SVN下载项目 本文地址:http://blog.csdn.net/caroline_wendy 使用SVN.在Git上下载项目. $ mkdir chunyu_trunk //创建目录 $ ls / ...

  4. Linux：闪光的宝石，智慧 (在）

    Linux:闪光的宝石,智慧的结晶(上) 老实说,这十几天以来.因为我违反了"家规",又被断网处罚(拔掉网线).没收手机与老年证(不许出家门). 因此.我平日里仅仅能面对一篇文章& ...

  5. 15一个NoSql数据库

    随着因特网web2.0该网站的兴起.非关系型数据库,现在已经成为一个非常受欢迎的新领域.非关系数据库产品的发展非常迅速.而在处理传统的关系数据库web2.0现场.特别是大规模,高并发SNS类型web2 ...

  6. poj 3225 间隙(横截面和填充操作)

    http://poj.org/problem?id=3225 一道题又做了一天. .这道题对我来说起初有N多难点. 1:区间的开闭怎样解决. . 2:如何把区间的交并补.对称差转化为对线段树的操作. ...

  7. JavaFX横幅类游戏开发 教训 游戏贴图

    上一节课,我们即将完成战旗Demo有了一个大概的了解.教训这,我们将学习绘制游戏地图. 由于JavaFX 2.2中添加了Canvas相关的功能,我们就能够使用Canvas来实现游戏绘制了. 游戏地图绘 ...

  8. Android－管理Activity生命周期 －开始一个Activity

    很多程序都是从main()方法开始启动的,和其他程序不同,android是在activity生命周期的特定状态的特定回调方法中初始化代码的.activity启动和销毁的时候都用很多回调方法. 这里将要 ...

  9. C语言探索之旅】 第一部分第四课第三章：变量的世界之显示变量内容

    内容简介 1.课程大纲 2.第一部分第四课第三章:变量的世界之显示变量内容 3.第一部分第五课预告:基本运算 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题,并会公布答案.还会带大家用 ...

  10. 微软研究院的分布式云计算框架orleans

    orleans   Orleans 客户端请求的消息流转以及消息在Silo中再路由机制 Witte 2015-04-29 21:58 阅读:196 评论:0     一种基于Orleans的分布式Id ...