今天的码农女孩做了关于svg画图和canvas画图 2022/1/18

svg和canvas画图
svg和canvas区别：
svg：不依赖分辨率，不能嵌入图片和文字，不能通过事件操作，但是可以通过css执行动画，矢量图形，放大缩小不失真，渲染能力强，适合做图标，地图，动画效果
canvas:依赖分辨率，可放置图片和文字，可以通过事件操作，渲染能力弱，适合做3d动画，游戏，3d地图，事件操作动画等
svg画图：
画线：
<line x1="0" y1="100" x2="200" y2="100" stroke-width=3 stroke="red"></line>
x1 y1起始点坐标 x2y2终止点坐标 stroke-width线体宽度 stroke线体颜色
画矩形：
<rect x="50" y="50" width="200" height="100" fill="blue" stroke-width=3 stroke="red"></rect>
 x y起始点坐标 width宽度 height高度 fill填充色 
<rect x="50" y="50" width="200" height="100" fill="blue" stroke-width=3 stroke="red" rx="30" ry="30"></rect>
矩形带圆角
画圆：
<circle cx="150" cy="150" r="60"></circle>
默认黑色 cx cy中心点坐标 r表示半径
画椭圆：
<ellipse cx="150" cy="150" rx="100" ry="70"></ellipse>
cx cy中心点坐标 rx 水平半径 ry垂直半径
多边形：
<polygon points="150,0 0,150 300,150"></polygon>
points所有点坐标,写作：x1,y1 x2,y2 x3,y3...
路径：
M移动到（起始点）  L直线连接  C曲线连接  S平滑曲线连接 Q贝塞尔曲线连接  Z封闭图形
<path d="M250 150 L150 350 L350 350Z" fill="white" stroke-width=3 stroke="red"></path>
        <path d="M0 150 S200 0 400 150" fill="white" stroke-width=3 stroke="red"></path>
注意：所有点都以空格分割，曲线后放两个点坐标，贝塞尔曲线后面放三个点坐标

canvas画图：
创建画布：
<canvas width="400px" height="300px" id="can1"></canvas>
var can1=document.getElementById("can1");
创建画笔：
var txt1=can1.getContext("2d");
画线：
        txt1.lineWidth=5线体粗细
        txt1.strokeStyle="red"线体颜色
        txt1.moveTo(50,50)起始点坐标
        txt1.lineTo(300,300)终止点坐标
        txt1.stroke()连成线
二次曲线：
        txt1.moveTo(0,200)
        txt1.quadraticCurveTo(200,0,400,200)（x1,y1,x2,y2）
贝塞尔曲线：
        txt1.moveTo(100,0)
        txt1.bezierCurveTo(0,250,400,150,300,300)
矩形：
        txt1.fillStyle="green"设置背景色
        txt1.strokeRect(50,50,200,100)线体矩形
        txt1.fillRect(150,150,200,100)填充矩形
        值：x轴 y轴 宽度 高度
圆形：
        txt1.arc(200,150,150,0,Math.PI*2,false)圆形
        值的顺序：xy轴中心点坐标，半径，起始位置，终止位置，true为逆时针画，false为顺时针画
        txt2.arc(200,150,150,0,3,true)线体圆形
        txt1.fillStyle="red"搭配使用
        txt1.fill()填充圆形
三角形：
        txt1.moveTo(200,0)
        txt1.lineTo(0,150)
        txt1.lineTo(400,150)
        txt1.lineTo(200,0)
        txt1.fillStyle="red"搭配使用
        txt1.fill()填充三角形
        txt1.stroke()
起点和终止点一样才是闭合的图形
txt.beginPath()开始画
txt.closePath()终止画
当在画布里绘制多个图形，下面图形的样式会覆盖上面图形，并且所有图形一笔画出，这样会有多余的线体，所有用beginPath()和closePath(),分别表示开始画笔和结束画笔
文字：
txt.font="80px 楷体"
txt.strokeText(文字，x,y)
txt.fillText(文字，x,y)
图片：
var img=new Image()
img.src=""
txt.drawImage(img,x,y,width,height)
阴影：
txt.shadowOffsetX=10 水平位置
txt.shadowOffsetY=10 垂直位置
txt.shadowBlur=10 模糊效果
txt.shadowColor=10 颜色
渐变色：
线性渐变：
var line=txt.createLinearGrandient(x1,y1,x2,y2)坐标 坐标
line.addColorStop(0,"red")
line.addColorStop(0.5,"red")位置是0-1之间的值
txt.fillStyle=line
径向渐变：
var bar=txt.createRadialGrandient(x1,y1,r1,x2,y2,r1)小圆 大圆
bar.addColorStop(0,"red")
bar.addColorStop(0.5,"red")位置是0-1之间的值
txt.fillStyle=bar

矩形变换
移动：txt.translate(x,y)
缩放:   txt.scale(x,y)
旋转：con.rotate(Math.PI/2)
矩阵：transform(宽度，水平扭曲，垂直扭曲，高度，水平移动，垂直移动)
组合：
txt.globalCompositeOperation=""
1.source-over 新图形在旧图形之上
2.destination-over 旧图形在新图形之上
3.source-atop 绘制旧图形和新图形交叉的位置
4.destination-atop 绘制新图形和旧图形交叉的位置
5.source-in 绘制两个图形交叉位置，按新图形颜色显示
6.destination-in 绘制两个图形交叉位置，按旧图形颜色显示
7.source-out绘制新图形，按旧图形交叉位置减去
8.destination-out绘制旧图形，按新图形交叉位置减去
9.lighter 绘制两个图形，叠加的位置进行加色处理
10.daker 绘制两个图形，叠加的位置进行减色处理
11.copy绘制新图形
12.xor 绘制两个图形，叠加的位置变透明
其他：
txt.clip()裁切
txt.clearRect(x,y,width,height)按矩形面积清除