svg 和 canvas
Posted jiangquhan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了svg 和 canvas相关的知识，希望对你有一定的参考价值。
一：定义
什么是canvas
canvas画布，使用js在网页上绘制图像
什么是svg
svg是可伸缩矢量图
二：使用
canvas使用
<script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.moveTo(10,10); cxt.lineTo(150,50); cxt.lineTo(10,50); cxt.stroke(); c.addEventListener("mousedown", function(event){ alert("hh") }); </script>
浏览器DOM展示
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> </canvas>
注意：
1.canvas通过js在画布上画了连线，但是浏览器中没有展示连线DOM
2.由于不是以DOM形式展示，canvas是一个整体，不能给画上图形添加事件，只能给canvas整体添加事件
svg使用
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190" @click="svgClick"> <polygon points="100,10 40,180 190,60 10,60 160,180" @click="domClick" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> </svg> </body> </html>
//绘制矩形
context.fillStyle="#FF0000"; //设置填充样式
context.strokeStyle="rgb(0,165,255)"; //设置轮廓样式
context.lineWidth=4; //设置绘制线宽
context.rect(0,0,150,75); //创建矩形形状 (x,y,width,height)context.fill(); //填充矩形
context.stroke(); //绘制矩形轮廓
填充三角形
context.beginPath(); //新建一条路径
context.moveTo(25,25); //将笔触移动到指定的坐标
context.lineTo(105,25); //创建到指定坐标的直线
context.lineTo(25,105);
context.fill();
/*描边三角形*/
context.beginPath();
context.moveTo(125,125);
context.lineTo(125,45);
context.lineTo(45,125);
context.closePath(); //闭合路径
context.stroke();
绘制图像方法共有三种：
context.drawImage(image, x, y)；
//x 和 y 是其在目标 canvas 里的起始坐标
context.drawImage(image, x, y, width, height)；
//width 和 height，这两个参数用来控制 当像canvas画入时应该缩放的大小
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
另外还可以通过clip()方法对图片进行裁剪：context.beginPath();
context.arc(100,150,50,0,2*Math.PI);//将图片剪辑一个圆形
context.clip();
context.drawImage(img,0,0);
svg使用方法 矩形 < rect >
圆形 < circle >
椭圆 < ellipse >
线 < line >
折线 < polyline >
多边形 < polygon >
路径 < path >
文本 < text >
绘制一个矩形
<rect x="50" y="20" rx="20" ry="20" width="150" height="100" style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
绘制圆形
绘制直线
<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2"/> //x1,y1为起始点坐标，x2,y2为终点坐标
绘制折线
<polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>
绘制路径
<path d="M150 0 L75 200 L225 200 " />
以上是关于svg 和 canvas的主要内容，如果未能解决你的问题，请参考以下文章