<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

</head>

    <body>

        <!--图案包括一个红色矩形及一个黄色矩形，透明度皆为50%，两个矩形的重叠部分为橙色-->

        <canvas width="1000" height="600">

            alternative content for browsers without canvas support

        </canvas>

        <script type="text/javascript">

            var canvas = document.querySelector("canvas");

            var context = canvas.getContext('2d');

            context.fillStyle = 'red';

            context.fillRect(0, 0, 800, 600);

            context.fillStyle = 'rgba(255,255,0,0.5)';

            context.fillRect(400, 200, 600, 400);

            //画一个折线

            context.moveTo(10, 10);

            context.lineTo(150, 50);

            context.lineTo(10, 50);

            context.stroke();

            //画一个黄色的球

            context.fillStyle = "yellow";

            context.beginPath();

            context.arc(70, 18, 15, 0, Math.PI * 2, true);

            context.closePath();

            context.fill();

            //绘制渐变条效果

            var grd = context.createLinearGradient(100, 100, 175, 50);

            grd.addColorStop(0, "#FF0000");

            grd.addColorStop(1, "#00FF00");

            context.fillStyle = grd;

            context.fillRect(100, 100, 175, 50);

        </script>

<!--        什么是SVG？

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

SVG 用于定义用于网络的基于矢量的图形

SVG 使用 XML 格式定义图形

SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失

        SVG 是万维网联盟的标准

        SVG 的优势

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

SVG 图像可通过文本编辑器来创建和修改

SVG 图像可被搜索、索引、脚本化或压缩

SVG 是可伸缩的

SVG 图像可在任何的分辨率下被高质量地打印

SVG 可在图像质量不下降的情况下被放大-->

        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">

            <polygon points="100,10 40,180 190,60 10,60 160,180"

                style="fill: lime; stroke: purple; stroke-width: 5; fill-rule: evenodd;" />

        </svg>

    </body>

</html>

HTML5学习之画布和SVG（四）的更多相关文章

  1. HTML5 学习03——内联 SVG

    什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺 ...

  2. HTML5学习笔记（二十四）：DOM扩展

    DOM扩展 DOM标准扩展最开始都是来自各个浏览器的自定义扩展DOM的功能,后被收录为标准的DOM相关API. 本笔记只记录被各大浏览器支持的标准扩展,对于特定浏览器的专有扩展不讨论. 选择符API ...

  3. Html5 学习系列（四）文件操作API

    原文:Html5 学习系列(四)文件操作API 引言 在之前我们操作本地文件都是使用flash.silverlight或者第三方的activeX插件等技术,由于使用了这些技术后就很难进行跨平台.或者跨 ...

  4. HTML5学习第四天

    HTML5学习第四天 一.HTML列表 HTML列表,有无序表,有序表以及自定义表,列表于列表之间可以实现嵌套 列表相关操作 <ul> <li>(多选)谁世界第二可爱?< ...

  5. HTML5学习(六)---------SVG 与Canvas

    参考教程:http://www.w3school.com.cn/html5/html_5_canvas_vs_svg.asp Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不 ...

  6. HTML5学习笔记（四）：H5中表单新增元素及改良

    方便布局 表单内容可以放在表单标签之外,这样做的好处是方便设计时不用考虑一定要将表单元素放在指定的form标签之下,只要指定元素适用于哪个表单即可,如下: <form id="test ...

  7. HTML5 学习总结（一）——HTML5概要与新增标签

    一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸 ...

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

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

  9. HTML5 学习笔记（一）——HTML5概要与新增标签

    目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...

随机推荐

  1. git 教程（5）--工作区和暂存区

    Git和其他版本控制系统如SVN的一个不同之处就是有暂存区的概念. 工作区(working directory) 就是你在电脑里能看到的目录,比如我的learngit文件夹就是一个工作区: 版本库 ( ...

  2. C++笔试题（转）

    http://blog.csdn.net/hxz_qlh/article/details/16864567 这里面列举的题考察的东西都非常细,包括strcpy,字符串,大.小端的判断,很容易犯错,值得 ...

  3. 一个完整的Http请求

    一个完整的http请求,通常有以下7点: 1.建立tcp连接 2.web浏览器web服务器发送请求命令 3.web浏览器发送请求头信息 4.web服务器应答 5.web服务器发送应答信息 6.web服 ...

  4. intellij Idea快捷键

    CTRL+ALT+O  优化导入的类和包 Alt + Center  导入类,实现接口 CTRL+N   查找类CTRL+SHIFT+N  查找文件CTRL+SHIFT+ALT+N 查找类中的方法或变 ...

  5. 网站标签栏ico设置代码

    放在公共文件的header中 <link rel="Shortcut Icon" href="{APP_PATH}favicon.ico" />

  6. oracle数据库备份

    --数据库备份--导出 exp userid=shoppingsys/shoppingsys@orcl file=/home/oracle/shoppingsys.dmp log=/home/orac ...

  7. Print Common Nodes in Two Binary Search Trees

    Given two Binary Search Trees, find common nodes in them. In other words, find intersection of two B ...

  8. centos6.5 nginx开机启动

    /etc/init.d/下添加nginxd文件,内容如下: #!/bin/bash # #chkconfig: - #description: Nginx is a World Wide Web se ...

  9. iOS 关于AFNetworking ssl 待完成

    先普及下基本知识,都是从网上搜到的,感谢原作者的辛勤付出! 原文链接 http://m.blog.csdn.net/blog/bytxl/8586830 x509是数字证书的规范,P7和P12是两种封 ...

  10. 进程&线程 同步异步&阻塞非阻塞

    2015-08-19 15:23:38 周三 线程 线程安全 如果你的代码所在的进程中有多个线程在同时运行,而这些线程可能会同时运行这段代码 线程安全问题都是由全局变量及静态变量引起的 若每个线程中对 ...