canvas与SVG

canvas

在页面中插入 canvas 元素

<canvas id=”myCanvas ” width=” 200 ” height=”1 0 0”＞＜／ canvas>
</ body>

给制图形的基本方法

var c=docurnent.getElernentByid (”myCanvas ”)
通过 canvas 元素的 getContext（）方法获取画布上下文（ context ） ，即创建 context 对象，以获取允许进行绘制的 2D 环境。
var context=c.getContext (” 2d” );
getContext（”2d”）方法的返回对象能够实现一个画布所使用的大多数方法

绘制

context . fillStyle=”# F FOOFF”;
context.fillRect(50 , 25 , 100 , 50 );
fillStyle 属性定义将要绘制的矩形的填充颜色为粉红色，
fillRect方法指定了要绘制的矩形的位置和尺寸

判断是否支持 canvas

<canvas id="myCanvas" style="border:1px solid;" width="200" height="100">
您的浏览器不支持canvas元素，请更新或更换您的浏览器。
</canvas>

<script type="text/javascript">
var canvas = document.getElementById("myCanvas"); 
if (canvas.getContext){ 
    alert("您的浏览器支持canvas!");
}else{ 
    alert("您的浏览器不支持canvas!"); 
}
</script>

绘制

直线

moveTo（） 、 lineTo（）两个方法
一个设置起点坐标，一个设置终点坐标
context.moveTo(0,0);
context.lineTo(200,100);

矩形

fillStyle：该属性设定填充图形的样式，如设置填充 的颜色值 。
strokeStyle：该属性设定 图形边框的样式，如设置边框的颜色值 。
lineWidth ：该属性设置图形边框的宽度 。 在绘制图形的时候，任何直线都可以通过 lineWidth属性指定直线的宽度。
fillRect（1，2，3，4）：该方法绘制被填充的矩形位置大小

圆形

beginPath 、 arc 、 closePath、 fill和 stroke。
beginPath（） ： 开始一条路径，或重置当前的路径
context.arc (x, y, r, sAngle , eAngle , counterclockwise)：圆心x，圆心y，半径，起始角，结束角，可选参数（true表示逆时针，false表示顺时针画）
closePath（）：创建从当前点到开始点 的路径， 相当于闭合路径操作
fill（）：填充当前的路径，默认值为黑色，可以使用 fillStyle 属性重设填充颜色或渐变
stroke（）：绘制己定义的路径，默认值为黑色，可以使用 strokeStyle 属性重设另一种颜色或渐变。

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
context.fillStyle="#FF00FF";
context.beginPath();
context.arc(100,75,50,0,Math.PI*2,true);
context.closePath();
context.fill();
</script>

属性

lineWidth ：设置线条的粗细
lineCap：设置端点样式 ，butt、 round 和 square ， 默认值为butt
lineJoin ： 设置连接处样式 ，round、 bevel 和 miter，默认值/为 miter
miterlimit ： 设置绘制交点的方式
translate为移动
rotate(angle)为旋转
context . scale(x , y)为缩放，分别为x轴和y轴的缩放因子，大于1放大
transform为变换
.fillText(text,x,y,maxWidth);绘制填充文字
context.font=” 20pt Times new roman”:设置文本属性

SVG

什么是SVG

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准

优势

SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大

SVG 与 Canvas两者间的区别

SVG 是一种使用 XML 描述 2D 图形的语言。

Canvas 通过 JavaScript 来绘制 2D 图形。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

转载:https://www.runoob.com/html/html5-svg.html