<!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. java.lang.OutOfMemoryError: Java heap space错误和方法(集、转)

    错误的方式来解决溢出下面的堆空间是从网上找: java.lang.OutOfMemoryError: Java heap space ================================= ...

  2. oracle12c（oracle12.1.0.1.0）安装指南--实测OEL5.9（RH5）

    [root@oel ora12c]# uname -a Linux oel 2.6.39-300.26.1.el5uek #1 SMP Thu Jan 3 18:31:38 PST 2013 x86_ ...

  3. 重新想象 Windows 8 Store Apps (1) - 控件之文本控件: TextBlock, TextBox, PasswordBox, RichEditBox, RichTextBlock, RichTextBlockOverflow

    原文:重新想象 Windows 8 Store Apps (1) - 控件之文本控件: TextBlock, TextBox, PasswordBox, RichEditBox, RichTextBl ...

  4. Hibernate Tomcat JNDI数据源配置（转）

    简述: 配置JNDI 查找Tomcat 中server.xml中定义的数据源 步骤: 1. 修改elipse的数据源server.xml 主要修改如下, 1. 添加下面这段Context文本 其中St ...

  5. 玩转html5(一)-----盘点html5新增的那些酷酷的input类型和属性

    今天正式开始学习html5了,相比html以前的版本,html5新增了好多功能,属性,使我们做出来的界面更加的绚丽,而且使用起来超级简单,这篇文章先来说说html增加的那些input类型和属性. 这些 ...

  6. 如何在Dreamweaver中使用zen coding

    在我发表上一篇<Zen Coding: 一种快速编写HTML/CSS代码的方法>之后,有网友表示不知道怎么在Dreamweaver上使用zen coding插件.OK,今天我就写一篇详细的 ...

  7. QrcodeWithLogo

    package com.qrcode; import java.awt.Color; import java.awt.Graphics2D; import java.awt.Image; import ...

  8. CMSIS标准

    CMSIS 标准(Cortex Microcontroller Software Interface Standard) ,翻译过来是"ARM Cortex™ 微控制器软件接口标准" ...

  9. expandableListView的divider该溶液显示在黑色

    黑色是divider高度.如何让他成为透明的啊? 布局例如以下:   <ExpandableListView android:layout_width="wrap_content&qu ...

  10. jquery经常使用事件（整理）

    Jquery事件 (一).事件列表. 1.blur() 当失去焦点时触发.包含鼠标点击离开和TAB键离开. 2.change() 当元素获取焦点后,值改变失去焦点事触发. 3.click() 当鼠标单 ...