canvas画布

1.不要再style中给canvas设置宽高，会有位移差

<canvas width="300" height="500" id="c"></canvas>

但可以设置画布的背景色

2.

var c=document.getElementById("c")//给c设置子一个绘图环境   得到一个对象
var can=c.getContext("2d")

canvas本身只是一个H5新标签，他的本质和div差不多

但当给了他   getContext("2d")    后  就成为了一个画图对象

然后就可以通过他内置的属性方法进行作画

绘制方块：

fillRect()  绘制一个填充的方块  默认颜色是黑色 但是可以通过  fillStyle(填充颜色)  改变

注意：一切样式的改变都要在写在绘制之前    遵循js从上往下执行的规则

can.fillStyle="red"
can.fillRect(20,30,100,100)

我这一个方块就是先将其颜色变为红色，然后再绘制出来

fillRect()中有4个参数  分别代表着 方块的  x轴位置 y轴位置  宽  以及  高

位置都想相对于画布的左上角为(0,0) 进行移动的

(我的画布部分为白色，非画布部分是黑色)

strokeRect()  绘制带边框的方块  默认边框颜色是黑色 但是可以通过  strokeStyle(填充颜色)  改变

strokeRect()中有4个参数  分别代表着 方块的  x轴位置 y轴位置  宽  以及  高    (跟填充差不多)

can.fillStyle="red"
can.strokeRect(20,30,100,100)

绘制线条：

　　moveTo() 绘制线段的起点

　　lineTo()  绘制线段的领点

　　每个线段只能有一个moveTo 可以有多个lineTo

　　stroke() 绘制线段

　　beginPath()  开始绘制路径

　　closePath()  结束绘制路径   二者同时出现  将绘制路径闭合

　　(起始点  结尾点首尾相连)

　　Rect()  绘制方块

　　clearRect(0,0,width,height)   清除画布(画布中图样的不断变化，是通过不断清除画图，不断重复作画得出的)

　　save()  保存路径

　　restore()    回复路径

　　二者成对出现，中间的属性样式只影响内部  不影响外面

画圆：

　　arc()

can.arc(150,150,95,0,2*Math.PI,false)

　　参数作用分别为  x  ， y圆心位置(都是以canvas画布的左上角为起点)   半径    弧度起点   弧度终点    false(顺时针)/true(逆时针)

　　注意  ：角度有正负之分  顺时针转的角度是正的， 逆时针转的角度是负的

画布的平移和旋转

平移translate画布大小位置不变  起始坐标  变了

can.translate(100,100)

相当于坐标平移

rotate()

画布的旋转都是以(0,0)起始点为中心点旋转

scale(0.5,0.5)

画布的缩放   就是将画布向后移动  跟人的视距就变远了  近大远小

画布中插入图片

var img=new Image;img.src="bg.jpg"img.οnlοad=function(){can.drawImage(img,10,20,160,200)}

需要创建一个图片对象，让图片被加载完成后执行

插入字体：

200，200字体的起始点  默认起始点在文字的左下角

svg 矢量图

　　svg绘制矢量图  canvas用于绘制位图

　　svg使用xml格式绘制图形

svg要有一个根节点  叫svg标签  就相当于 html

svg如果不设置大小  默认占用面积  300*150

定义矩形

　　<rect></rect>  属性： width(宽) height(高)  x  y(位置)   rx ry(圆角)  fill(填充颜色)  stroke-width(边框宽度)   stroke（边框颜色）

　　opacity透明度(填充和边框都改变)   fill-opacity填充透明度   stroke-opacity边框透明度

定义圆

　　<circle></circle>   属性： cx  cy(圆心坐标)   r(半径)

定义椭圆

　　<ellipse></ellipse>   cx cy(圆心坐标)   rx(定义x轴半径)   ry(定义y轴半径)

定义直线

　　<line></line>   x1 y1(起始坐标)    x2 y2(定义结束坐标)   stroke(线段颜色)

定义路径

　　<path></path>

M是起点坐标

L是相邻点坐标

Z让路径构成闭合回路

H代表水平的线条 默认y轴上的值一样

V 代表垂直的线条 默认x轴上的值一样

A 后面跟七个值

Transfrom 转换 svg中的一个属性 translate  rotate scale

平移 旋转 都是以起点0 0（svg的左上角）点为参考点 而css3中以元素的中心点为参考点

g  用于将相关元素进行组合

g身上的属性 子元素都会继承 但是g上的属性都必须是显现属性 不是svg元素私有的 比如 g 上的圆心坐标不行

Text 用于定义文本 x y xy的值在字体的左下角

Text-anchor=”middle” 让字体居中

Image 绘制图片

<use>用于复制元素 x y

xy 是相对于原始的元素的坐标位置 不是相对svg的00点坐标

animate

写在需要动画元素的中间