<!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. unrecognized selector sent to instance 0x10b34e810

    一个错误: *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[NSURLEr ...

  2. 802.11（wifi）的MAC层功能

    MAC层是802.11的主要功能部分.上层应用通过调用MAC层提供的接口原语调用MAC层的功能. MAC一共向上提供了2大类接口原语,共30种.数据(1)和管理(29).数据部分就是提供普通数据包的收 ...

  3. 【SICP读书笔记（三）】练习2.18 --- 表序列的reverse方法

    来自练习2.18 请定义出过程reverse,它以一个表为参数,返回的表中所包含的元素与参数表相同,但排列顺序与参数表相反: (reverse (list 1 4 9 16 25)) (25 16 9 ...

  4. hdu2993坡dp+二进制搜索

    MAX Average Problem Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  5. php xss过滤

    XSS已知CSS (Cross Site Script) ,跨站点脚本攻击.它指的是恶意攻击者Web插入恶意网页html代码,当用户浏览网页.其中嵌入Web里面html代码运行,从而实现了一些人的攻击 ...

  6. mongodb 学习笔记05 --用户管理

    csdn的markdown编辑器真有够烂的,这篇文章又给弄丢了 启用认证 mongod 启动默认没有开启权限,你须要指定 –auth 启动.或者在配置文件里设置security.authorizati ...

  7. Linux 下一个 Mysql error 2002 错误解决

    Linux 下一个 Mysql error 2002 错误解决     首先查看 /etc/rc.d/init.d/mysqld status 查看mysql它已开始.     假设启动的的话,先将数 ...

  8. ZOJ Problem Set - 2563 Long Dominoes 【如压力dp】

    称号:ZOJ Problem Set - 2563 Long Dominoes 题意:给出1*3的小矩形.求覆盖m*n的矩阵的最多的不同的方法数? 分析:有一道题目是1 * 2的.比較火.链接:这里 ...

  9. 认识node.js：express（一）

    express是node.js官方推荐的框架. 安装 npm install express -g 命令中的 “-g” 表示全局(global) 由于新版本(4.x.x)的express的命令集中到了 ...

  10. c++日历改进版

    #include<iostream> # include<fstream> #include<time.h> #include<string> #inc ...