HTML5-canvas与svg的使用 - Powered by Discuz! Archiver

武学涓 發表於 2019-5-22 10:08:00

HTML5--canvas与svg的使用

一、Canvas
canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API，它可以实现在网页中完成动态的2D与3D图像技术。<canvas> 标记和 SVG以及 VML 之间的一个重要的不同是，<canvas> 有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。SVG 绘图很容易编辑与生成，但功能明显要弱一些。
 
canvas可以完成动画、游戏、图表、图像处理等原来需要Flash完成的一些功能。
 
1.创建canvas
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;"><canvasid="draw" width="600" height="600"></canvas>
</pre>
</div>
　在html中创建一个canvas标签，最好再在标签本身中设置宽高，如果用其他方式设置宽高会有0.5的位移差
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">var draw=document.getElementById("draw");
//获取画布元素
var draws=draw.getContext("2d");
//给画布一个绘制环境，2d表示在2d环境下绘制
//draws返回的是一个对象
</pre>
</div>
　　
2.绘制
 
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">//绘制线条

//设置线宽
draws.lineWidth = 10;
//设置线的颜色
draws.strokeStyle = "blue";

draws.moveTo(0,0);//移动画笔到0,0点
draws.lineTo(300,300);//画线到300,300的位置
draws.stroke();//执行描边 //绘制矩形 draws.strokeRect(x,y,width,height) //绘制一个边框矩形</pre>
<pre class="brush:javascript;gutter:true;">draws.fillRect(x,y,width,height) //绘制一个填充矩形</pre>
<pre class="brush:javascript;gutter:true;">draws.clearRect(x,y,width,height) //清除一个矩形 </pre>
<pre class="brush:javascript;gutter:true;">//绘制圆形 </pre>
<pre class="brush:javascript;gutter:true;">draws.arc(x,y,radius,startAngle,endAngle,anticlockwise) //arc方法用来绘制一段圆弧路径，以(x,y)圆心位置radius为半径、startAngle为起始弧度、 //endAngle为终止弧度来，而在画圆弧时的旋转方向则由最后一个参数 anticlockwise 来指定， //如果为 true 就是逆时针，false 则为顺时针，Math.PI * 2 刚好为一周。 //绘制图像 //在html中加入一个img标签 <img src="1.jpg" id="pic"/> //在JS中... //需要将页面中的图片都加载完之后执行 window.onload=function(){ </pre>
<pre class="brush:javascript;gutter:true;">　　var draw=document.getElementById("draw");
　　//获取画布元素
　　var draws=draw.getContext("2d");</pre>
<pre class="brush:javascript;gutter:true;">　　//绘制图像 　　document.getElementById("pic"); 　　draws.drawImage(pic,X坐标，Y坐标，图片宽，图片高)</pre>
<pre class="brush:javascript;gutter:true;"> } //绘制文字 //描边文字</pre>
<pre>draws.font="50px microsoft yahei" //设置描边字体颜色</pre>
<pre>
draws.strokeText("Hello",20,100) //设置描边文字内容，和X坐标Y坐标</pre>
<pre> </pre>
<pre class="brush:javascript;gutter:true;">//填充文字 draws.fillStyle="red"</pre>
<pre class="brush:javascript;gutter:true;">//设置填充字体颜色 </pre>
<pre class="brush:javascript;gutter:true;">draws.fillText("Hello",20,200); //设置填充文字内容，和X坐标Y坐标</pre>
</div>
 
　　
 
3.理解一些canvas方法
 
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">draws.beginpath()
draws.closepath()
// 二者同时出现将绘制路径闭合 ,自动将路径闭合

draws.save()
draws.restore()
//二者成对出现中间的属性样式只影响内部不影响外部

//translate()
draws.strokeRect(0, 0, 150, 150);

draws.translate(150, 150);

draws.strokeRect(0, 0, 150, 150); //被平移的元素
//平移后这个被平移的元素的坐标就会改变

//rotate()

draws.rotate(0.2);

draws.strokeRect(75, 75, 75, 75); //根据画布的0，0点旋转
</pre>
</div>
 
　　
 
二、SVG
SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG是W3C("World Wide Web ConSortium" 即 " 国际互联网标准组织")在2000年8月制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。SVG 于 2003 年 1 月 14 日成为 W3C 推荐标准。
特点：
1．任意放缩 用户可以任意缩放图像显示，而不会破坏图像的清晰度、细节等。 2．文本独立 SVG图像中的文字独立于图像，文字保留可编辑和可搜寻的状态。也不会再有字体的限制，用户系统即使没有安装某一字体，也会看到和他们制作时完全相同的画面。 3．较小文件 总体来讲，SVG文件比那些GIF和JPEG格式的文件要小很多，因而下载也很快。 4．超强显示效果 SVG图像在屏幕上总是边缘清晰，它的清晰度适合任何屏幕分辨率和打印分辨率。 5．超级颜色控制 SVG图像提供一个1600万种颜色的调色板，支持ICC颜色描述文件标准、RGB、线X填充、渐变和蒙版。 6．交互X和智能化。SVG面临的主要问题一个是如何和已经占有重要市场份额的矢量图形格式Flash竞争的问题，另一个问题就是SVG的本地运行环境下的厂家支持程度。
浏览器支持：
Internet Explorer9，火狐，谷歌Chrome，Opera和Safari都支持SVG。 IE8和早期版本都需要一个插件 - 如Adobe SVG浏览器，这是免费提供的。
1.引入方法
 
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">1.<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
绘制图形
</svg>
xmlns:命名空间
version：版本

2.<img src="01.svg" alt="">
</pre>
</div>
 
　　
 
2.绘制
<div class="cnblogs_Highlighter">
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;"><svg>

//绘制直线

<line x1="0" y1="0" x2="500" y2="500" style="stroke:rgb(0,0,255);stroke-width:3"></line>

//参数：
//x1 属性在 x 轴定义线条的开始
//y1 属性在 y 轴定义线条的开始
//x2 属性在 x 轴定义线条的结束
//y2 属性在 y 轴定义线条的结束

//绘制圆形、椭圆

<circle r="50" cx="110" cy="60" fill="lightskyblue"></circle>

<ellipse cx="300" cy="80" rx="100" ry="50" style="fill:yellow;stroke:dodgerblue;stroke-width:5"><ellipse/>

//参数
//CX属性定义的椭圆中心的x坐标
//CY属性定义的椭圆中心的y坐标
//RX属性定义的水平半径
//RY属性定义的垂直半径

//绘制文本

<text x="0" y="50" fill="blue" style="font-size:30px; font-family: 'microsoft yahei';">My Text</text>

//绘制矩形

<rect x="40" y="60" width="260" height="260" style="fill:blue;stroke:pink;stroke-width:5;

//绘制图像

<image x="20" y="20" width="100" height="80" xlink:href="./img/1.jpg"></image>

//绘制路径

<path d="M70 0 L100 150 L40 150 Z" stroke="plum" fill="plum" ></path>

//参数
//M是起点坐标 L是相邻点坐标 Z让路径构成闭合回路
//H代表水平的线条默认y轴上的值一样
//V 代表垂直的线条默认x轴上的值一样/
//A 后面跟七个值

//绘制多边形

<Polygon points=””></polygon>

//points：多边形的点

//绘制折线

<polyline points=”” ></polyline>

//points：折线的点

</svg>
</pre>
</div>
　　
</div>
　　
  
来源：https://www.cnblogs.com/qinlinkun/p/10904195.html

頁: [1]

琼殿技术论坛's Archiver

HTML5--canvas与svg的使用