<!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. Windows 10磁盘占用100%解决办法

    开机后磁盘占用高,是因为 windows 10 默认启用了 superfetch 服务.   这个服务的主要功能是加快程序的启动速度.开机以后,系统将那些经常使用的程序,预先从硬盘加载到内存中,这样, ...

  2. tornado + supervisor + nginx 的一点记录

    看了比较多的blog基本都是这个架构: supervisor ------------ app1 |-------app2 |-------.... |-------appn |-------ngin ...

  3. 安装完eos出的问题

    Failed to load JavaHL Library.These are the errors that were encountered:no msvcp100 in java.library ...

  4. meeting room I & II

    Given an array of meeting time intervals consisting of start and end times [[s1,e1],[s2,e2],...] (si ...

  5. 基础01 dos命令

    常见的dos命令: 盘符:        进入指定的盘下面. 操作文件夹:                   dir                                   列出当前控制 ...

  6. Js注释

    注释 介绍 作用 合作分享:方便他人阅读,便于分享 沉淀总结:容易忘记代码,自己总结沉淀 形式 1.// 双斜杠 2．/**/斜杠星号 常用标签 标签 描述 @module 标明当前文件模块,在这个文 ...

  7. ffmpeg-20160617-git-bin.7z ffmpeg-20160626-git-bin.7z

    ESC 退出 0 进度条开关 1 屏幕原始大小 2 屏幕1/2大小 3 屏幕1/3大小 4 屏幕1/4大小 S 下一帧 [ -2秒 ] +2秒 ; -1秒 ' +1秒 下一个帧 -> -5秒 f ...

  8. WebLogic部署

    1.抓取解压WAR包,放在相应目录下 2.登录部署,激活 http://jingyan.baidu.com/article/c74d6000650d470f6b595d72.html Linux环境中 ...

  9. Match:Cyclic Nacklace(KMP的next数组的高级应用)(HDU 3746)

    串珠子 题目大意:给定一个字串,要你找到如果要使之成为循环串,在末尾需要的最小的字数(只能添加字符,不能删减字符) 首先联动一下之前做过的动态规划问题POJ 3280,当然了3280这一题是用的LD, ...

  10. div+css进度条

    效果图: 进度条代码: <style type="text/css"> 红色:background-color:f05153:border:1px solid #f05 ...