html页面矩形,HTML5画布（矩形）

canvas元素用于绘制图形。

canvas元素是HTML5中新增的一个重要元素，元素本身是没有绘图能力，所有的绘制工作必须在javascript内部完成。

案例1：

function draw(){

var c=document.getElementById("myCanvas");

var cxt= c.getContext("2d");

cxt.fillStyle="green";

cxt.fillRect(0,0,350,260);

cxt.fillStyle="red";

cxt.fillRect(50,50,100,100);

cxt.strokeStyle="blue";

cxt.strokeRect(110,110,100,100)

cxt.lineWidth=1;

}

您的浏览器不支持

效果图：

注释：

(1)getContext("2d")对象是内建的HTML5对象，可以绘制多种图形，如路径、矩形、圆等；

(2)绘制图形时有两种方式——填充(fill)与绘制边框(stroke);

例：cxt.fillRect(x,y,width,height);

cxt.strokeRect(x,y,width,height);

(3)fillStyle--填充样式，如颜色值；

strokeStyle--图形边框样式，如颜色值；

(4)lineWidth指定线宽；

HTML5画布(CANVAS)速查简表

HTML5画布(CANVAS)速查简表 http://www.webhek.com/misc/html5-canvas-cheat-sheet/

HTML5画布生成的3D飞船舰队效果

在线演示 本地下载 使用HTML5画布2D来模拟3D的空间效果,生成舰队飞行效果,了解如何开发,请阅读下面代码相关“轻视频”: HTML5画布模拟生成3D的舰队飞行效果

使用HTML5画布(canvas)生成阴影效果

来源:GBin1.com 使用HTML5的画布特性,我们可以创建图形,在这片文章中,我们将创建图形的阴影. var canvas = document.getElementById('shadowca ...

06. Web大前端时代之：HTML5+CSS3入门系列~HTML5 画布

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...

html5画布基础

canvas 元素用于在网页上绘制图形. 什么是canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canva ...

HTML5 画布canvas元素

HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小 ...

HTML5画布Canvas

一.Canvas概念介绍 1.概念 Canvas : 画布 2.作用 : HTML5 Canvas 元素用于图形的绘制, 通过脚本(通常是JavaScript)来完成.它本身只是个图形容器,必须使用脚 ...

HTML5 画布参考

描述 HTML5 标签用于绘制图像(通过脚本,通常是 JavaScript). 不过, 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必 ...

随机推荐

基于struts2和hibernate的分页实现

在拜读了各位大牛的博客后,加以修改和添加总算是借鉴出了一个可行的分页实现.(●'◡'●) 话不多说,先贴两张效果图吧 接下来是实现代码: pagingDAOImpl.java public class ...

2014 UESTC暑前集训动态规划专题解题报告

A.爱管闲事 http://www.cnblogs.com/whatbeg/p/3762733.html B.轻音乐同好会 C.温泉旅馆 http://www.cnblogs.com/whatbeg/ ...

SQL作业的操作全

--定义创建作业 转自http://hi.baidu.com/procedure/blog/item/7f959fb10d76f95d092302dd.html DECLARE @jobid uniq ...

java使用split切割字符串的时候，注意转义字符

今天在做项目的时候发现一个奇怪的问题 File file = new File("d:\\a.txt"); BufferedReader br = new BufferedRead ...

EXCLE图形插入实例

根据所给名称找到相应图片,并进行导入. 代码如下: Sub Import_picture() For Each shap In Sheet1.Shapes '在sheet1中的图片对象进行循环 If ...

20160503-spring入门1

一.Spring是什么 Spring是一个开源的控制反转(Inversion of Control ,IoC)和面向切面(AOP)的容器框架.它的主要目得是简化企业开发. IOC 控制反转  publ ...

Annotation(三)——Spring注解开发

Spring框架的核心功能IoC(Inversion of Control),也就是通过Spring容器进行对象的管理,以及对象之间组合关系的映射.通常情况下我们会在xml配置文件中进行action, ...

alarm函数可以定时

貌似是可以的,不过感觉好像这样用不是很好,最好还是用回timer_settimer一些列函数吧,不过既然开了头,就看下alarm怎么用吧. 1. 所需头文件  #include

appium+Android studio安装与配置

一. 关于JDK 安装,以及Java环境的设置 1.下载JDK1.6,选择对应的安装路径 2.配置相应的Java 环境变量 A.属性名称:JAVA_HOME (sdk的安装目录) 属性值:C:Prog ...

nagios监控mysql主机,nginx,磁盘IO,网卡流量

http://blog.chinaunix.net/uid-28685162-id-3506260.html nagios安装完成,打开/usr/local/nagios/etc/nagios.cfg ...