1. <figure>
  2.    <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
  3.    <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
  4. </figure>

canvas

  1. <canvas id="myCanvas" width="200" height="100"></canvas>

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：


  1. //JavaScript 使用 id 来寻找 canvas 元素：
  2. var canva = document.getElementById("myCanvas");
  3. //创建 context 对象
  4. var ctx = canva.getContext("2d");
  5. //下面的两行代码绘制一个红色的矩形：
  6. ctx.fillStyle = "#ff0000"; // 设置颜色
  7. ctx.fillRect(0,0,150,75); // 把(0,0)位置大小为150x75的矩形涂色

image.png

Canvas的坐标系统：

绘图标签 - 图2

Canvas的坐标以左上角为原点，水平向右为X轴，垂直向下为Y轴，以像素为单位，所以每个点都是非负整数。

绘制形状


名称 用途 demo
fillStyle 设置填充颜色 ctx.fillStyle = “#ff0000”;


fillRect
 绘制矩形 ctx.fillRect(0,0,150,75);
clearRect 擦除矩形，擦除的意思是把该区域变为透明 ctx.clearRect(0,0,150,75);

绘制文本

名称 用途 demo
shadowOffsetX 水平方向的阴影 ctx.shadowOffsetX = 2
shadowOffsetY ctx.shadowOffsetY = 2;
shadowBlur 模糊的距离 ctx.shadowBlur = 2;


shadowColor
 阴影color ctx.shadowColor = ‘#666666’;
font 字体 ctx.font = ‘24px Arial’;
fillText 绘制文本 ctx.fillText(‘带阴影的文字’, 20, 40);

3D WebGL

getContext('2d')方法让我们拿到一个CanvasRenderingContext2D对象，所有的绘图操作都需要通过这个对象完成，如果需要绘制3D怎么办？HTML5还有一个WebGL规范，允许在Canvas中绘制3D图形：

  1. gl = canva.getContext("webgl");

svg

1.html直接插入svg

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  6.   <polygon points="100,10 40,180 190,60 10,60 160,180"
  7.   style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
  8. </svg>
  10. </body>
  11. </html>

2.SVG 文件可通过以下标签嵌入 HTML 文档：、 或者