canvas和svg

Posted 2021-12-02 guhuai

canvas 画布   位图

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

　　2.　给c设置一个绘图环境 得到的是一个对象

　　　　var c=document.getElementById("c1")

　　　　var can=c.getContentext("2d");

　　3.　fillRect()   绘制一个填充的方块 默认颜色是是黑色

　　4.　strokeRect() 绘制带边框的方块

绘制线条

　　moveTo()绘制线段的起点

　　lineTo()绘制线段的领点

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

　　stroke()绘制线段

　　beginPath()

　　cosePath()  二者同时出现  将绘制路径闭合

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

　　Rect() 绘制方块

　　clearRect(0,0,width,height)清除画布

　　can.save()

　　can.restore()　　二者成对出现         中间的属性样式只能影响内部   不影响外部

画圆

　　can.arc(200,200,50,0,Math.PI,true)

　　can.stroke()

　　200,200是圆心坐标

　　50是半径

　　0是起始弧度  Marh.PI是结束弧度

　　true       是逆时针方向

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

　　

　　画布的平移和旋转

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

　　can.tanslate(100,100)

　　can.fillRect(-100,-100,50,50);

　　

　　相当于坐标平移

　　Rotate()

　　画布的旋转都是以00起始点为中心点旋转

　　Scale(0.5,0.5)

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

　　画布中插入图片

　　　　　

　　插入字体

　　

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

svg     矢量图

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

　　svg使用xml格式绘制图形

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

　　

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

　　定义矩形

　　　　Rect标签  属性有 width height x y rx ry fill stroke-width stroke style

　　　　style="fill-opacity:0.2; stroke-opacity:0.5; opacity:0.5"

　　　　fill-opacity和opacity的区别 fill-opacity只改变填冲颜色的透明度     opacity改变fill和stroke

的透明度都改变

　　定义圆 

　　　　circle cx cy     定义圆的圆心坐标        r定义半径

　　定义椭圆

　　　　ellipse cx cy    定义圆心坐标      rx定义x轴半径     ry定义y轴坐标

　　定义直线

　　　　line     x1 y1  定义起始点坐标   x2   y2  定义结束坐标     必须结合stroke绘制

　　定义多边形

　　　　polygon    points=""    写多边角的坐标    fill-rule=""    

　　定义折线

　　　　polyline     points="" 折点的坐标

　　定义的路径

　　　　Path d="M"

　　　　M是起点坐标 L是相邻点坐标  Z让路径构成闭合回路

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

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

　　　　A后面跟七个值

　　

　　　　　　

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

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

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

　　

　　G身上的属性  子元素都会继承  但是g上的属性都必须是显现属性    不是svg元素私有的

比如g上的圆心坐标不行

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

　　　　

　　text-anchor="middle"   让字体居中

　　image  绘制图片

　　

　　use用于复制元素 x y

　　x y是相对于原始的元素的坐标位置   不是相对svg的0 0点坐标

　　animate

　　　　写在需要动画元素的中间

　　　　attributeName   form to dur  repeatCount="indefinite"(无限次)

　canvas和svg的不同

　　矢量图就是说 放大多少倍 都不会出现马赛克 。 永远都是清晰的

位图就是说 放大比原图尺寸的倍数后 就会出现马赛克， 不清晰了， 看着就模糊了。

这就是唯一的差别