canvas与svg使用实例分析

这篇文章主要介绍了canvas与svg使用实例分析的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇canvas与svg使用实例分析文章都会有所收获，下面我们一起来看看吧。

站在用户的角度思考问题，与客户深入沟通，找到鲤城网站设计与鲤城网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：网站设计制作、成都网站建设、企业官网、英文网站、手机端网站、网站推广、域名申请、网页空间、企业邮箱。业务覆盖鲤城地区。

1.canvas画布（位图）

2.绘制矢量图

不要在style中给canvas设置宽高 会有位移差

//获取元素

var c=document.getElementById（"c"）

//获取绘图环境

var c=c.getContext（"2d"）

fillRect（） 绘制一个填充的方块 默认颜色是黑色

strokeRect（） 绘制带边框的方块

绘制线条

moveTo（） 绘制线段起点

lineTo（） 绘制线段的领点

每个线条只能有一个 moveTo可以有多个 lineTo

stroke（） 绘制线段

beginPath（） closePath（） 二者同时出现 将绘制路径闭合（起始点 结尾点首位相连）

Rect（） 绘制方块

clearRect（0,0,width,height）清楚画布

save（） restore（） 二者成对出现 中间属性样式只影响内部，不影响外部

1.画圆

c.closePath（）

c.fill（）

c.restore（）

c.moveTo（200,200）

c.arc（200,200,150,0,360*Math.PI/180,true）

c.stroke（）

200,200是圆形坐标 50是半径

0是起始弧度 Math.PI是结束弧度

true是逆时针 flase是顺时针

注意：角度有正负之分 顺时针角度是正的，逆时针角度是负的

2.画布的平移和旋转

平移translate 画布大小位置不变 起始坐标变了

相当于坐标平移

rotate（） 画布的旋转都是以00起始点为中心点旋转

scale（0.5,0.5） 画布的缩放 就是将画布向后移动 跟人的视距就变远了 近大远小

c.fillStyle='lightpink'

c.scale（0.5,0.5）

c.fillRect（0,0,100,100）

画布中插入图片

//获取元素

var c=document.getElementById（"c"）

//获取绘图环境

var c=c.getContext（"2d"）

var img=new Image;

img.src="img/02.jpg"

img.onload=function（）{

c.drawImage（img,10,20,160,200）

}

插入字体

//字体大小 样式

c.font="30px imapct"

c.fillText（"全站最强",200,200）

//字体空心

c.strokeText（"Big smile!",200,200）

svg

svg绘制矢量图

svg使用xml格式绘制图形

svg要有一个根节点 叫svg标签 相当于html

stroke-width="2" fill="red" />

svg如果不设置大小，默认占用面积 3008*150

1.定义矩形

rect标签有：

width height 矩形宽高

fill 定义矩形填充颜色（rgb值、颜色名或16进制）

stroke-width 定义矩形边框宽度

stroke 定义矩形边框以及颜色

x 定义矩形左侧位置（矩形到浏览器窗口左侧距离）

y 定义矩形顶端位置（矩形到浏览器窗口顶端位置）

fill-opacity 定义填充颜色透明度

stroke-opacity 定义边框颜色透明度

Rx Ry 可以使矩形产生圆角

fill-opactty和opacity的区别？

fill-opacity只改变填充颜色透明度 opacity改变fill和stroke的透明度都改变

2.定义圆

circle cx cy 定义圆点的 x和y坐标。如果省略cx和cy，圆的中心会设置为（0,0）

r定义半径

3.定义椭圆

椭圆和圆很相似。不同之处在于椭圆有不同的x和y半径，而圆的x和y半径是相同的

ellipse cx cy定义圆中心的x，y坐标

rx 定义水平半径

ry 定义垂直半径

4.定义直线

line x1 y1 定义起始坐标 x2 y2定义结束坐标 必须结合 stroke

5.定义多边形

polygon poinits=“定义多边形每个角x和y坐标”

6.定义曲线（折线）

polyline poinits“折点的坐标”

7.定义路径

d=“定义路径指令”

M 是起点坐标

L 是相邻点坐标

Z是让路径构成闭合回路

H代表水平划线 默认y轴上值一模一样

V 代表垂直的线条 默认x轴上值一样

A 后面跟七个值

8.g 用于相关元素进行组合

g身上的属性 子元素都会继承 但是g上的属性都必须显现属性，不是svg的私有属性，比如g上的圆心坐标不行

transform 转换svg中的一个属性 translate rotate scale

平移旋转 都是以起点 0 0 （svg的左上角） 点为参考点 而css3中以元素的中心点为参考点

text 用于定义文本 xy xy的值在字体左下角

哈哈哈哈

9.绘制图片

10.use 用于复制元素 xy

xy是相对原始元素的坐标位置 不是相对svg的00点坐标

11.animate 写在需要动画元素的中间

关于“canvas与svg使用实例分析”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“canvas与svg使用实例分析”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注创新互联行业资讯频道。