<!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. Path相关评论的方法(一)

    以前的主要是关于Canvas的translate(平移) .scale(缩放) .rotate(旋转) .skew(错切).接下来几篇主要讲下android里的Path(封装了贝塞尔曲线)&  ...

  2. Zabbix的数据表结构

    看到Zabbix的数据表结构吧,就知道数据量大了 性能问题很让人担忧,不过基于Zabbix数据库导出报表,或自动跑报表的时候,就必须去了解一下zabbix的数据表结构了,得知道XX放在哪才能找到XX, ...

  3. MySQL 存储过程和函数（转）

    概述 一提到存储过程可能就会引出另一个话题就是存储过程的优缺点,这里也不做讨论,一般别人问我我就这样回答你觉得它好你就用它.因为mysql中存储过程和函数的语法非常接近所以就放在一起,主要区别就是函数 ...

  4. Foursquare 8.0 ：聪明人给互联网公司上的流量转化课

    今年 5 月上线的 Swarm 虽然应用制作精良,但不免让人怀疑是 Foursquare一次失败的互联网公司服务越界和用户忠诚度试水.但非常快这群聪明人让我们发现事情并没有这么简单:他们给互联网公司们 ...

  5. LeetCode204:Count Primes

    Description: Count the number of prime numbers less than a non-negative number, n. 比计算少n中素数的个数. 素数又称 ...

  6. [TWRP 2.8.4] for 小米2S/2SC 支持中英文切换

    其中这个 twrp 2.8.4 在18号的下午已经编译好了. 经历了2个小时的代码修改,再经过后期的调试,中英文双语版本的twrp出炉了. 下面上几张图: 图片1:为英文界面 图片2: 图片3:中文界 ...

  7. HDoj-2084-号码塔-dp

    号码塔 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submis ...

  8. 关于.net MVC5+EF6 网站部署的问题

    创建mvc web application,采用code first 的方式,MVC5,EF6.0 整了一个网站.开发完之后.直接publish.就这样部署到服务器上了. 在使用过程中发现,网站打开的 ...

  9. Arcgis for Js之Graphiclayer扩展具体解释

    在前两节,讲到了两种不同方式的聚类,一种是基于距离的,一种是基于区域范围的,两种不同的聚类都是通过扩展esri/layers/GraphicsLayer方法来实现的.在本节,就具体的讲讲esri/la ...

  10. CCLayer在Touch事件(Standard Touch Delegate和Targeted Touch Delegate)

    在做练习,触摸故障,看到源代码,以了解下触摸事件. 练习操作:直CClayer子类init在 this->setTouchEnabled(true); 事件处理方法覆盖 virtual bool ...