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