提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
目录
1.了解网页中的两个绘图技术
(1)SVG
(1)SVG是一种可伸缩的矢量图型,它基于XML并用于描述图形的语言;
(2)不同于用像素来描绘的矩阵图像(JPG、PNG、GIF),SVG是和分辨率无关的;
(3)SVG图像可以通过JS和DOM操作来创建和操控;
(4)SVG有一些预定义的形状元素,可被开发者使用和操作:矩形、圆形、椭圆、线、折线、多边形、路径
svg的使用方式:
(1)svg文件可以直接插入到网页中,称为DOM的一部分,然后使用js和css进行操作。(2)svg代码可以写在一个独立文件中,然后用“img/object/iframe/embed”标签插入到网页中
(3)css可以直接使用svg文件。
(4)svg还可以转为BASE64编码,作为Data url写入网页中。
(1)SVG 指可伸缩矢量图形 (Scalable Vector Graphics)。
(2)SVG 用来定义用于网络的基于矢量的图形。
(3)SVG 使用 XML 格式定义图形。
(4)SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失。
(5)SVG 是万维网联盟的标准。
(6)SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体。
(2)canvas
canvas:画布,h5新标签;
(1)canvas本身没有任何外观,只是在文档中创建了一个画板;
(2)ie9之前的版本不支持canvas;
(3)画布的宽度和高度要用canvas的属性设置,不要直接在css里面定义;
(4)画布的
getContext()
方法返回一个“绘制上下文”对象; 绝大多数的画布绘制API来自这个对象; 也就是说画布元素和他的上下文对象是两个完全不同的概念; 调用该方法时,传递的参数是“2d”,也就是getContext('2d')
,可以在画布上绘制二维图像; 3d绘制就相对比较复杂了,具体实现还在规范中;
(3)画布的尺寸和坐标
– 画布以左上角(0, 0)为坐标原点;
– 往右为X轴的坐标不断增大;
– 往下为Y轴的坐标不断增大;
2.绘制线段和填充多边形
(1)绘制线段的API是上下文对象的方法;
(2)beginPath:开始定义一条新的路径;
(3)moveTo:开始定义一条新的子路径,该方法确定了线段的起点;
(4)lineTo:将上面定义的线段起点和指定的新的点连接起来;
(5)到这里只是规划好了思路,还没有在画布上画出任何图形;
(6)fill():填充区域,此时只是填充,起点和终点并没有连接起来;
(7)closePath:会把起点和终点连接起来;
(8)stroke():开始绘制图形,当前路径下的所有子路经都会绘制出来;
(9)如果要接着绘制新的路径,记得调用beginPath()方法;
案例例如:
<style> #box{ border: 1px gray solid; } </style> <canvas id="box" width="600" height="500"> 123456</canvas> <script> var canvas=document.querySelector('#box'); var ctx=canvas.getContext("2d") //Context 上下文 ctx.lineWidth=10 //线条宽度 ctx.strokeStyle="red" //线条颜色 ctx.moveTo(100,100) ctx.lineTo(300,300) ctx.moveTo(400,400) ctx.lineTo(100,100) ctx.moveTo(400,400) ctx.lineTo(300,300) ctx.stroke() // lineTo()会把上一次的作为这一次的起点,没有上一次的终点那就没有这一次的起点 ctx.lineTo(100,100) ctx.lineTo(200,200) ctx.lineTo(300,300) </script>
效果如下:
3.矩形的绘制
(1)rect():在当前子路经添加一条弧线;
语法:context.rect(x,y,width,height);
四个参数: 起点坐标x,y:左上角坐标; 宽度width:矩形的宽度; 高度height:矩形的高度;
(2)strokeRect()方法可以直接绘制一个矩形;
语法:context.strokeRect(x,y,width,height);
例如:
<style> #box{ border: 1px gray solid; } </style> <canvas id="box" width="600" height="500"> 123456</canvas> <script> var canvas=document.querySelector('#box'); var cdx=canvas.getContext("2d") //Context 上下文 // 绘制矩形 cdx.rect(200,100,300,400) //轨迹 cdx.fillStyle="orange" cdx.fill() cdx.stroke() </script>
运行结果:
4.曲线的绘制和填充
arc():在当前子路经添加一条弧线;
语法:context.arc(x,y,r,sAngle,eAngle,counterclockwise);
案例如下:
参数 描述 x 圆的中心的 x 坐标。 y 圆的中心的 y 坐标。 r 圆的半径。 sAngle 起始角,以弧度计。(弧的圆形的三点钟位置是 0 度)。 eAngle 结束角,以弧度计。 counterclockwise 可选。规定应该逆时针还是顺时针绘图 <style> #box{ border: 1px gray solid; } </style> <canvas id="box" width="600" height="500"> 123456</canvas> <script> var canvas=document.querySelector('#box'); var cdx=canvas.getContext("2d") //Context 上下文 let deg=Math.PI/180 cdx.arc(300,250,200,0*deg,360*deg,false) cdx.stroke() </script>
运行结果: