<!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. 20 BasicTaskScheduler0 基本任务调度类基类（二）——Live555源码阅读(一)任务调度相关类

    这是Live555源码阅读的第二部分,包括了任务调度相关的三个类.任务调度是Live555源码中很重要的部分. 本文由乌合之众 lym瞎编,欢迎转载 http://www.cnblogs.com/ol ...

  2. RPC（Remote Procedure Call Protocol）——远程过程调用协议 学习总结

        首先了解什么叫RPC,为什么要RPC,RPC是指远程过程调用,也就是说两台服务器A,B,一个应用部署在A服务器上,想要调用B服务器上应用提供的函数/方法,由于不在一个内存空间,不能直接调用,需 ...

  3. ShellCode框架(Win32ASM编写)

    主要方法: 使用宏的一切技巧让编译器 算出代码的长度 有较好的扩充性 include ShellCodeCalc.inc ;>>>>>>>>>&g ...

  4. 【MavenWeb】初探：创建一个Maven Web项目

    第一步:创建一个Simple的Maven项目 直接点下一步,把name上面的几个部分填写好,直接Finish即可. 就可以看到如下的结构: 注意点1:如果按照网上的其他一些做法来创建,你会发现少了sr ...

  5. saltstack/salt的state.sls的使用

    SLS(代表SaLt State文件)是Salt State系统的核心.SLS描述了系统的目标状态,由格式简单的数据构成.这经常被称作配置管理 首先,在master上面定义salt的主目录,默认是在/ ...

  6. 【Linux】find grep 联合使用 过滤所有子目录、文件

    find . -type f -name '*.*' | xargs grep --color -n 'Admin@123'find . -type f -name '*.*' | xargs sed ...

  7. Remove Invalid Parentheses

    Remove the minimum number of invalid parentheses in order to make the input string valid. Return all ...

  8. js里面的 InttoStr 和 StrtoInt

    javascript 字符串 和 数字的转换,话说好灵活,感觉回不去pascal了 int转换string: 1,var str=String(int); 2,num.toString(param) ...

  9. ACM/ICPC 之 快排+归并排序-记录顺序对(TSH OJ-LightHouse(灯塔))

    TsingHua OJ 上不能使用<algorithm>头文件,因此需要手写快排(刚开始写的时候自己就出了很多问题....),另外本题需要在给横坐标排序后,需要记录纵坐标的顺序对的数量,因 ...

  10. 禁止Linux用户登录方法

    我们在做系统维护的时候,希望个别用户或者所有用户不能登录系统,保证系统在维护期间正常运行.这个时候我们就要禁止用户登录. 1.禁止个别用户登录.比如禁止lynn用户登录. passwd -l lynn ...