canvas元素用于绘制图形。


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

案例1：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        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;
        }
    </script>
</head>
<body onload="draw();">
<canvas id="myCanvas" width="400" height="300" style="border: 1px solid #dddddd">您的浏览器不支持</canvas>

</body>
</html>

效果图：


注释：
（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画布（矩形）的更多相关文章

  1. HTML5绘制矩形和圆形并且还有获取在这个图层内的坐标的思路和代码 - feilong_12的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  2. HTML5画布(CANVAS)速查简表

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

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

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

  4. 使用HTML5画布（canvas）生成阴影效果

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

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

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

  6. html5画布基础

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

  7. HTML5 画布canvas元素

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

  8. HTML5画布Canvas

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

  9. HTML5 画布参考

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

随机推荐

  1. python登陆教务管理系统

    想试着模拟登陆一些网站,这次先拿学校的教务管理系统练练手,写一下登陆的流程. 1.我们登陆的url:http://222.195.8.201,但我们所填的密码不是提交到这个页面上去,检查一下页面代码 ...

  2. IOS 解析XML文档

    前段时间想找点事做,就是试着看能不能用豆瓣的API做点什么,于是就碰到了这个问题——XML解析. 老师还没讲,只能自己去查. XML文档解析主要有SAX和DOM两种模式,IOS上两种模式都可以用,这里 ...

  3. 这样就算会了PHP么？-6

    关于PHP与WEB表单交互的CASE,十多年前没拾起来啊. 下一步进入JS与PHP的交互... <form name="form1" method="post&qu ...

  4. 程序错误[C/C++]

    对于初学者而言,一般意义上,程序错误可以分为两类,逻辑错误和非逻辑错误.前者是指,程序可以通过编译或链接但运行时不符合预期结果,后者是程序不能通过编译或链接. 乍一看这样的分类非常清楚.不过,当引入语 ...

  5. iOS 9之Advanced Touch Input(高级触摸输入)

    金田 今天要讲的主题是iOS 9高级触摸输入,更准确地讲,是在iOS9上如何减少触摸输入到屏幕显示的延迟程度,此次将分 低延迟渲染(iOS9 渲染性能优化)和 触摸点方案改进 两个方面来介绍. 低延迟 ...

  6. 2015第23周一SVN插件安装

    之前想把eclipse(3.7)的SVN插件版本从1.8.x降到1.6.x,上午折腾了好久没弄好,先是尝试在线安装,按网上说的1.6.x的url安装不成功(可能是网络问题,下载不到资源),然后尝试下载 ...

  7. 完美：adobe premiere cs6破解版下载[序列号+汉化包+破解补丁+破解教程]

    原文地址:http://blog.sina.com.cn/s/blog_6306f2c60102f5ub.html 完美:adobe premiere cs6破解版下载,含序列号.汉化包.注册机.破解 ...

  8. samsungGalaxyS4USB驱动

    http://www.samsung.com/cn/support/usefulsoftware/KIES/JSP

  9. map循环遍历删除

    typedef map<string,int> MapFileList; int main() { MapFileList m_SingleList; m_SingleList.inser ...

  10. swift 随机数

    1.一行代码生成随机数  arc4random() 如果要生成一个生成在一定范围内的随机整数: func randomIn(#min: Int, max: Int) -> Int { retur ...