<!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. java web 路径 --转载

    主题:java(Web)中相对路径,绝对路径问题总结 1.基本概念的理解 绝对路径:绝对路径就是你的主页上的文件或目录在硬盘上真正的路径,(URL和物理路径)例如:C:\xyz\test.txt 代表 ...

  2. MediaRecorder类介绍

    audiocallbackvideojavadescriptorencoding 目录(?)[+] 找到个MediaRecorder类介绍和大家分享一下. Mediarecorder类在官网的介绍和在 ...

  3. Android emulator warning----Emulator window was out of view and was recentred

    最近在打开Android emulator时,总会提示“Emulator window was out of view and was recentred ”,然后无法打开模拟器,但是可以使用Win7 ...

  4. Mysql主从同步（复制）

    目录: mysql主从同步定义      主从同步机制 配置主从同步      配置主服务器      配置从服务器 使用主从同步来备份      使用mysqldump来备份      备份原始文件 ...

  5. WPF之旅（一）- 概述

    WPF与之前出现的其他技术相比引入了“内置硬件加速”和“分辨率无关”等创新功能.WPF是一种成熟的技术,它是几个已经发布的.NET平台的一部分,并通过几个版本不断地进行完善(WPF3.0 -> ...

  6. ORA-00845

    系统版本: [root@yoon ~]# more /etc/oracle-releaseOracle Linux Server release 5.7 数据库版本: Oracle Database ...

  7. MVC的小知识点

    1.MVC的前台页面编译完之后,也会生成一个前台页面类.在前天页面中加入这段代码this.GetType().Assembly.GetLocation()得到当前类所在的程序集,可以查看其所在的程序, ...

  8. Spring4新特性简述

    Spring是一个java世界中极其流行 的开源框架.Spring的初衷是降低企业级开发的复杂性,并试图通过POJO对象实现之前EJB这类重型框架才能实现的功能.Spring不仅仅对服务 端开发有用, ...

  9. php将数据库导出成excel的方法

    <?php $fname = $_FILES['MyFile']['name']; $do = copy($_FILES['MyFile']['tmp_name'],$fname); if ($ ...

  10. 如何自定义Liferay 7 portal的Log in登录界面

    前提: 1. Liferay portal 7 2. Liferay IDE 3.0.1 Liferay现有的工具中提供了很多修改portal的模板,以满足开发者的各种自定义需求. 修改的原理是利用M ...