HTML5 绘制图形 Canvas 与 SVG 的基本用法(笔记)
Canvas和SVG是HTML5中主要的2D图形技术,前者提供画布标签和绘制API,后者是一整套独立的矢量图形语言,二者有各自的优势和特点,可适用于不同的场景。
Canvas 与 SVG简单比较
Canvas | SVG |
---|---|
提供API通过JavaScript 绘制 | SVG使用 XML 格式定义基于矢量的图形 |
逐像素进行渲染 | 每个被绘制的图形均被视为对象 |
依赖分辨率 | 不依赖分辨率(图像在放大或改变尺寸的情况下其图形质量不会有损失) |
渲染速度快 适合图像密集型的游戏 | 复杂度高会减慢渲染速度 不适合游戏应用 |
Canvas基本用法
首先,在HTML中添加 canvas 标签,即在html中创建了一个画布容器:
<canvas id="myCanvas" width="200" height="100"></canvas>
然后在JS脚本中获取canvas DOM对象,创建context对象即可开始使用其API方法在canvas创建的画布上进行绘制了:
<script>
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
context.fillStyle="#FF0000";
context.fillRect(0,0,150,75);
</script>
canvas API简单介绍
- 坐标
canvas坐标系统与大多数绘图API一样,画布左上角坐标为(0,0),x轴方向水平向右,y轴方向垂直向下,单位为像素:
- 绘制矩形
首先介绍两种绘制方法:context.fill() 和 context.stroke(),其中fill()为填充方法,stroke()为绘制轮廓的方法,以绘制矩形为例:
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(); //绘制矩形轮廓
绘制结果如图:
需要在绘制图形前设置样式和颜色,颜色设置一般有以下几种方式:
- ctx.fillStyle = “orange”;
- ctx.fillStyle = “#FFA500”;
- ctx.fillStyle = “rgb(255,165,0)”;
- ctx.fillStyle = “rgba(255,165,0,1)”;
其中,rgba第四个参数为透明度。
rect()方法只是创建了矩形形状,并没有将其绘制出来,API也提供了直接绘制出矩形的方法fillRect(x,y,width,height), strokeRect(…),还有清除矩形的方法clearRect(…)。
- 绘制路径和形状
先看示例代码:
/*填充三角形*/
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();
绘制结果:
其中,moveTo(x,y)方法指将路径起始点放在哪,即画路径笔放在哪个地方,这时还并没有创建出线条,继续moveTo到下一个坐标并不会产生路径,只是改变了笔的位置;而lineTo(x,y)方法则创建出了路径(并没有绘制出来),且笔触的位置也跟着改变了;另外closePath()方法指让路径闭合,如图创建出了闭合的三角形。
注:beginPath()指开始创建路径,如果画下一条路径时没有重新调用beginPath(),绘制下一条路径时,上一条路径也会重新绘制一遍;fill()会自动闭合路径,与closePath()一样,而stroke()不会。
绘制一般的形状,基本都可以使用创建路径的方式,还有一些其他方法可以创建弧线、曲线等路径,从而可以绘制出更复杂的图形:
- 弧形
arc(x, y, radius, startAngle, endAngle, anticlockwise);
圆心:(x,y), 半径:radius,起始弧度:startAngle ,结束弧度:endAngle,逆时针与否:anticlockwise(默认false为顺时针,true为逆时针)
示例:
context.fillStyle = "rgb(255,165,0)";
context.beginPath();
context.a