<!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. 王立平--Unity综上所述控制

    GUILayout   Label 创建一个自己主动布局的标签. Box 创建一个自己主动布局的box. Button 创建一个单次button.当用户点击button会马上发生一些事件. Repea ...

  2. js如果你想删除您问

    if (confirm("OK删除?") == true)

  3. Java乔晓松-android中上传图片到服务器Tomcat(Struts2)

    在做android开发的时候,有时你会用到图片的上传功能,在我的android项目中,我是选中图片,点击上传多张图片 android客户端上传图片部分的代码如下: package com.exampl ...

  4. C语言程序代写（Linux下线程）

    联系QQ:928900200 CSCI 3120 Operating Systems Summer 2014 Handout 3Assignment 2Date Due: June 5, 2014 b ...

  5. java序列化是什么和反序列化和hadoop序列化

    1.什么是序列化和系列化DE- 神马是序列化它,序列化是内存中的对象状态信息,兑换字节序列以便于存储(持久化)和网络传输.(网络传输和硬盘持久化,你没有一定的手段来进行辨别这些字节序列是什么东西,有什 ...

  6. 记View跨界平局

    <?xml version="1.0" encoding="utf-8"? > <RelativeLayout xmlns:android=& ...

  7. C#改动文件或目录的权限，为指定用户、用户组加入全然控制权限

    C#改动文件或文件夹的权限,为指定用户.用户组加入全然控制权限 //给Excel文件加入"Everyone,Users"用户组的全然控制权限 FileInfo fi = new F ...

  8. hdu1964之插头DP求最优值

    Pipes Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Subm ...

  9. Robotium调用getActivity()导致程序挂起的方法

    1. 问题背景的叙述性说明 需要直接用在工作中没有项目的源代码robotium测试目标android平台launcher,该平台的基础上,当前日期的版本号android 4.4.2.之前我用来验证的可 ...

  10. 无需Visual Studio，5容易的 - 分为报告

    总报告设计,例如RDLC.水晶报表等.,需要安装Visual Studio.由VS提供报表设计界面设计报告,由VS设计报告.NET非常方便开发者,.但对于非开发,安装4G一个VS.并且需要Licens ...