<!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. C#高级编程笔记 Day 3， 2016年9月 8日 抽象类

    1.虚方法:把一个基类函数声明为 virtual,就可以在任何派生类中重写该函数. 2.在Java 中所有函数都是虚拟的,但是在C# 中,C# 要求在派生类的函数重写另一个函数时,要使用 overri ...

  2. 剑指Offer 把字符串转换成整数

    题目描述 将一个字符串转换成一个整数,要求不能使用字符串转换整数的库函数. 数值为0或者字符串不是一个合法的数值则返回0 输入描述: 输入一个字符串,包括数字字母符号,可以为空 输出描述: 如果是合法 ...

  3. Ngrok搭建服务器

    一.ngrok简介及作用 ngrok 是一款用go语言开发的开源软件,它是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道.下图简述了ngrok的原理. ngrok 可 ...

  4. QT 信号与槽connect

    QT 信号与槽connect QT 信号与槽connect connect函数调用几个限制 connect函数代码 QT中信号与槽的连接使用的connect函数是一个静态函数,在类QObject中定义 ...

  5. 简单的哈希表实现 C语言

    简单的哈希表实现 简单的哈希表实现 原理 哈希表和节点数据结构的定义 初始化和释放哈希表 哈希散列算法 辅助函数strDup 哈希表的插入和修改 哈希表中查找 哈希表元素的移除 哈希表打印 测试一下 ...

  6. Python tab键自动补齐

    1.进入root家目录  建立.tab文件 .tab文件内容如下: ############################################## import sys import r ...

  7. git rebase简介(高级篇)

    原文:http://gitbook.liuhui998.com/4_3.html 一.基本   对于git rebase,你亦可以选择进行交互式的rebase.这种方法通常用于在向别处推送提交之前对它 ...

  8. C#系统委托之Action And Func

    Action Action<T> Func Func<T> Action:封装一个方法,该方法不具有参数并且不返回值 public delegate void Action() ...

  9. (转) C#如何使用异步编程

    怎么使用异步,就是用委托进行处理,如果委托对象在调用列表中只有一个方法,它就可以异步执行这个方法.委托类有两个方法,叫做BeginInvoke和EndInvoke,它们是用来异步执行使用. 异步有三种 ...

  10. keepalived+haproxy构建高可用负载均衡

    一.环境介绍 我用的是centos6.7,内核版本为2.6.32-573.el6.x86_64,keepalived版本为keepalived-1.2.22,haproxy版本为haproxy-1.6 ...