<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <script type="text/javascript">

            window.onload = function()

            {

                var obj = document.getElementById("CVS");

                var context = obj.getContext("2d");

                context.lineWidth = 10;

                context.strokeStyle = "aqua";

                context.lineCap = "round";

                context.moveTo(10,10);

                context.lineTo(400,20);

                context.lineTo(200,100);

                context.fillStyle = "blanchedalmond";

                context.fill();

                //context.lineTo(10,10);

                context.closePath();

                context.stroke();

            }

        </script>

    </head>

    <body>

        <canvas id="CVS" width="600px" height="400px" style="border:5px dotted blue;">

        </canvas>

    </body>

</html>

HTML5入门1---Canvas画布的更多相关文章

  1. HTML5入门十一---Canvas画布实现画图（二）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. HTML5入门十---Canvas画布实现画图（一）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. HTML5入门九---Canvas画布

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. HTML5 中的 canvas 画布（一）

    ---恢复内容开始--- 在HTML5中新添加的元素,canvas 现在支持 IE9+的版本 注意:HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript ...

  5. HTML5 中的 canvas 画布（二）

    绘制图片 一.绘制图片 context.drawImage()(即把图片放到canvas里) var image = new Image();  // 先创建图片对象 image.src = '图片的 ...

  6. 用html5的canvas画布绘制贝塞尔曲线

    查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  7. 自学HTML5第四节（canvas画布详解）

    canvas画布好像可是说是HTML5的精华了,一定要学好,嗯嗯,绚丽的东西就要从基础的开始.... 先看看啥玩意叫做canvas 什么是 Canvas? HTML5 的 canvas 元素使用 Ja ...

  8. HTML5入门以及新标签

    HTML5 学习总结(一)--HTML5入门与新增标签   目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 ...

  9. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  10. 推荐10个适合初学者的 HTML5 入门教程

    HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究.借助尖端功能,技术和 API,HTML5 允许你创建响应性.创新性.互动性以及令人惊叹的 ...

随机推荐

  1. （原创）LINUX_UNIX设计思想-读书笔记

    第一章 一.Unit哲学 1.小即是美 2.让每一个程序只做好一件事情 3.尽快建立原型 4.舍高效率而取可移植性 5.使用纯文本文件来存储数据 6.充分利用软件的杠杆效应 7.使用shell脚本来提 ...

  2. 关于不同进制数之间转换的数学推导【Written By KillerLegend】

    关于不同进制数之间转换的数学推导 涉及范围:正整数范围内二进制(Binary),八进制(Octonary),十进制(Decimal),十六进制(hexadecimal)之间的转换 数的进制有多种,比如 ...

  3. Optimize date2str function

    /*************************************************** Created Date: 19 Jul 2013 Created By: Jimmy Xie ...

  4. uploadify 上传

    本来想做一套上传公用的组建的,里面包含文件转码等功能,看来这些都只能后来一步一步加上了,先写下来... 1,引入脚本等 @{ Layout = null; } <!DOCTYPE html> ...

  5. 《零成本实现Web自动化测试--基于Selenium》 第四章 Selenium 命令

    Selenium 命令,通常被称为Selenese,由一系列运行测试案例所需要的命令构成.按顺序排列这些命令就构成了测试脚本. 一. 验证颜面元素 1.Assertion或者Verification ...

  6. MySQL 多实例删库脚本

    DB版本:5.5.14 OS:CentOS 6.3 在测试环境中,在一台服务器上创建多个实例,在每个实例中一个一个删库比较麻烦,因此用下面脚本,可以直接删除所有库,除了系统库以外: #!/bin/ba ...

  7. [Environment Build] 如何实现Visual Studio中的区域语言环境切换

    最开始学习C#这门语言的时候,英文能力不够好,安装的中文版本的Visual Studio,现在工作有段时间了,公司又是个外企,慢慢不习惯中文版本的了,于是产生了想切换语言的想法,网上搜索了下,下载了个 ...

  8. JS类库函数收集中....

    实现string的substring方法 方法一:用charAt取出截取部分 String.prototype.mysubstring=function(beginIndex,endIndex){ v ...

  9. angular事件代理

    在angular中,是不支持事件代理的,有些时候,我们需要处理比较多的数据,尤其是一些列表的时候,可能会很多,如果给每一项都加事件的话,注定慢很多,为了解决这个事情,因此需要一个做事件代理的direc ...

  10. 在客户环境定位.net程序异常

    http://www.cnblogs.com/yuilin/p/3788796.html 我们的程序最后都会运行在客户的环境中,客户环境上不会有VS这样的开发工具,那么怎么办呢? 我们可以使用一个很小 ...