正文 

当前位置： 首页 > 程序 > java教程

3.canvas与svg的区别(代码片段)

zhumother zhumother     2023-04-26     279

关键词：

canvas是通过javascript来绘制的2D图形

canvas是控制像素来渲染的

一旦渲染完成，浏览器就不会关注了，如果位置发生变化，整个场景就需要重新绘制

 

 <canvas id="mycanvas"
        width="500"
        height="300"
    ></canvas>

    <script type="text/javascript">
        var c=document.getElementById("mycanvas");
        var cxt=c.getContext("2d");
        cxt.fillStyle="#FF0000";
        cxt.fillRect(0,0,150,75);

        // 画了一条线
        cxt.moveTo(160,0)
        cxt.lineTo(160,90)
        cxt.stroke()

        // 画一个圆
        cxt.fillStyle="#FF0000"
        cxt.beginPath();
        cxt.arc(200,100,15,0,Math.PI*2,true);
        cxt.closePath();
        cxt.fill();

        // 图像
        var img=new Image()
        img.src="./video/QQ图片20190529164332.jpg" 
        cxt.drawImage(img,100,100)
    </script>

 

 

Svg是使用xml描述的2D图形

也就意味着svg dom里面每个元素都是可用的，可以使用事件处理器

Svg的属性发生变化，浏览器可以自动重现图形

 

区别：

                                   canvas                        svg

分辨率：                      依赖                        不依赖

支持事件处理:            不支持                       支持

文本渲染能力:       弱的文本渲染        最适合带有大型渲染区域的应用程序（比如谷歌地图）

适合游戏：          适合密集型游戏          不适合游戏应用

前端面试html—svg和canvas有什么区别？

主要有以下区别：1.canvas是H5时期才有绘图方法，而svg已经有了十多年的历史；2.canvas绘图是基于像素点，是位图，如果进行放大或缩小会失真；svg基于图形，用html标签描绘形状，放大缩小不会失真&... 查看详情

canvas与svg的区别有什么？canvas和svg的区别比较

canvas与svg都是可以在浏览器上创建图形，因此，在html5中感觉canvas和svg很相似，但是实际上canvas与svg有着根本的区别。下面php中文网通过比较canvas和svg之间的不同来给大家总结了关于canvas与svg的区别。一起来看一看吧。 在说c... 查看详情

html/html5(代码片段)

...itle与h1的区别b和strong、i和em的区别iframe的优缺点label标签Canvas和SVG的区别渐进增强与 查看详情

canvas和svg有什么区别？

canvas与svg都是可以在浏览器上创建图形，因此，在html5中感觉canvas和svg很相似，但是实际上canvas与svg有着根本的区别。下面php中文网通过比较canvas和svg之间的不同来给大家总结了关于canvas与svg的区别。一起来看一看吧。 在说c... 查看详情

canvas与svg的区别

canvas是画布。位图不要在style中给canvas设置宽高。会有位移差varc=document.getElementById("c1");//给c设置一个绘图环境，得到的是一个对象varcan=c.getContext("2d");svg　　svg是矢量图svg绘制矢量图canvas用于绘制位图svg使用xml格式绘制图形svg要... 查看详情

canvas与svg的区别

...素都是独立的DOM节点，能够方便的绑定事件或用来修改。canvas输出的是一整幅画布；　　　　2、svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会是真和锯齿。而canvas输出标量画布，就像一张图片一样，放大... 查看详情

svg动态添加元素与事件(代码片段)

...ootElement.appendChild()函数来将创建的元素添加给svgDoc。示例代码：&lt;embedid="mySVG"src="map.svg"type="image/svg+xml"/&gt;&lt;div&gt;x坐标值&lt;inputid="xValue"&gt;&lt;/div&gt;&lt;div&gt;y坐标值&lt;inputid="yValue"&gt;&lt;/... 查看详情

css饼图-与svg(代码片段)

查看详情

svg与canvas的区别

...、脚本话和压缩可伸缩在任何分辨率下被高质量的打印和canvas比较canvasSVG依赖分辨率不依赖分辨率不支持事件处理器支持事件处理器弱文本渲染能力最适合带有大型渲染区域的应用程序，比如谷歌地图依适合图像密集型的游 查看详情

canvas与svg的区别

Canvas1.canvas通过javascript来绘制2D图形。2.canvas是逐个像素进行渲染。3.在canvas中，图形绘制完成后，它就不会继续得到浏览器的关注。如果位置、大小等发生变化，那么整个canvas场景也需要重新绘制，根据变化不同，会产生一定程... 查看详情

svg实践之屏幕坐标与svg元素坐标转换(代码片段)

...4、如下：5、javascript方法：矩阵.inverse()=矩阵的逆矩阵6、代码如下：api： /*屏幕坐标转为svg坐标*/coordinateTransform(screenPoint,someSvgObject)varCTM=someSvgObject.getScreenCTM();returnscreenPoint.matrixTransform(CTM.inverse());reportMouseCoordinates(svgElement,pageX,p... 查看详情

canvas与svg区别

HTML5新特性之五——SVG绘图 Canvas绘图SVG绘图绘图类型位图矢量图缩放失真不失真颜色细节丰富不够丰富应用领域照片、游戏统计图、图标、地图内容JS绘制每个图形都是标签事件绑定不方便方便 ScalableVectorGraphiph，可缩放... 查看详情

canvas与svg特性和使用对比(代码片段)

什么是Canvas？HTML5的canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。什么是SVG？SVG指可伸缩矢量图形(ScalableVectorGraphics)SVG... 查看详情

python生成svg图片，一篇博客带你掌握python与svg之间的操作(代码片段)

pythonsvgwritePython操作SVG图片的库清单svgwrite库svgwrite库其他图形绘制储备反爬技术svgwrite生成一个手机号Python操作SVG图片的库清单在Python中，可以使用以下几种库来生成SVG图片：svgwrite：这是一个简单易用的Python库，... 查看详情

svg教程01(代码片段)

什么是SVG？SVG指可伸缩矢量图形(ScalableVectorGraphics)SVG用来定义用于网络的基于矢量的图形SVG使用XML格式定义图形SVG图像在放大或改变尺寸的情况下其图形质量不会有所损失SVG是万维网联盟的标准SVG与诸如DOM和XSL之类的W3C标准是一... 查看详情

svg图形的简单修改(代码片段)

...来以后，发现想你要在html中用的样式和您下载的样式有区别，比如要修改一下方向和颜色。fill=‘green‘是用来填充颜色的（更改颜色）；transform="rotate(-135500500) 查看详情

scss混合svg背景与png后备(代码片段)

查看详情

numpy中矩阵运算的特点(代码片段)

...中的一维和二维数组与线性代数中的矩阵和向量的概念有区别，也有联系。恰当掌握numpy中的矩阵运算特点可以大大提高程序的编写的效率。这其中需要不断的做斗争的就是区分一维向量与一维矩阵之间的差异性。关键词ÿ... 查看详情