svg与canvas

最新推荐文章于 2023-10-13 21:30:49 发布
最新推荐文章于 2023-10-13 21:30:49 发布
阅读量163 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44997513/article/details/115491028
版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>svg练习</title>
</head>
<style>
  .box{
width: 200px;
height: 200px;
border: 2px solid red;
  }
</style>
<body>
  <!-- 
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用 -->
    <div class="box">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
    <!-- 单个圆 ：
    cx->圆心横向坐标
    cy->圆心纵向坐标
    r->圆半径
    fill->圆内部填充
    fill-opacity->矩形内部填充透明度
    stroke->边框颜色,如果没有设置fill,圆的颜色采用边框颜色
    stroke-width->边框宽度
    stroke-opacity->边框颜色透明度
    -->
    <circle cx="100" cy="30" r="20" stroke="black" stroke-width="2" stroke-opacity="0.4" fill="red" fill-opacity="0.9" />
    <!-- 单个矩形 ：
    x->矩形横向偏离量
    y->矩形纵向偏移量
    width->矩形宽度
    height->矩形高度
    fill->矩形内部填充
    fill-opacity->矩形内部填充透明度
    stroke->边框颜色,如果没有设置fill,圆的颜色采用边框颜色
    stroke-width->边框宽度
    stroke-opacity->边框颜色透明度
    rx->横向圆角
    ry->纵向圆角
    -->
    <rect x="75" y="60" width="50" height="100" fill="rgb(0,0,255)" fill-opacity="0.3" stroke-width='1'stroke='rgb(0,0,0)' stroke-opacity="0.8" rx="5" ry="8"/>
    <!-- 单个线 ：
    x1->起点横坐标
    y1->起点纵坐标
    x2->终点横坐标
    y2->终点纵坐标
    stroke->线颜色
    stroke-width->线宽度
    stroke-opacity->线颜色透明度
    -->
    <line x1="0" y1="0" x2="300" y2="300" stroke="rgb(99,99,99)" stroke-width="4" stroke-opacity="0.6"/>
    <!-- 文本 
      x->文字横向偏离量
      y->文字纵向偏移量
      fill->文字填充
      fill-opacity->文字填充透明度
    -->
    <text x="0" y="15" fill="red" fill-opacity="0.7">I love SVG</text>
    <!-- 滤镜 
      <filter> 标签的 id 属性可为滤镜定义一个唯一的名称（同一滤镜可被文档中的多个元素使用）
      filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时，必须使用 # 字符
      滤镜效果是通过 <feGaussianBlur> 标签进行定义的。fe 后缀可用于所有的滤镜
      <feGaussianBlur> 标签的 stdDeviation 属性可定义模糊的程度
      in="SourceGraphic" 这个部分定义了由整个图像创建效果
    -->
    <defs>
      <filter id="Gaussian_Blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="20"/>
      </filter>
    </defs>
    <ellipse cx="200" cy="150" rx="70" ry="40"
    style="fill:#ff0000;stroke:#000000;
    stroke-width:2;filter:url(#Gaussian_Blur)"/>
    </svg>
    </div> 
    <!-- 靶心练习 
    g->分组
    -->
    <div class="box">
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
        <g transform="translate(100,100)" stroke="black" stroke-width="2" stroke-opacity="0.4" fill="transparent">
        <circle r="80"   />
        <circle r="60"  />
        <circle r="40"  />
        <circle r="20"  />
        </g>
      </svg>
    </div>
    <!-- 百度矢量 
    g->分组
    -->
    <div class="box">
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
        <g style="cursor: pointer;">
          <line x1="20" y1="50" x2="100" y2="100" stroke="#ccc"  />
          <line x1="20" y1="50" x2="100" y2="100" stroke="transparent" stroke-width="10" />
          <rect x="50" y="65" width="20" height="20" fill="#999"  rx="5" ry="5"/>
          <text x="60" y="80" fill="#ffff" font-size="14" text-anchor="middle">?</text>
        </g>
        <g style="cursor: pointer;">
         <circle cx="20" cy="50" r="20" stroke="black" stroke-width="2" stroke-opacity="0.4" fill="#fff"/>
          <text x="20" y="55" fill="#000" font-size="12" text-anchor="middle">易车网</text>
        </g>   
         <g style="cursor: pointer;">
          <circle cx="100" cy="100" r="24" stroke="black" stroke-width="2" stroke-opacity="0.4" fill="#fff"/>
          <text x="100" y="105" fill="#000" font-size="12" text-anchor="middle">易车网</text>
        </g>
      </svg>
    </div>
    <!-- 动态创建 -->
    <div id="div1">

    </div>
</body>
</html>
<script>
//1.0
// window.οnlοad=function(){
//   var svgNs='http://www.w3.org/2000/svg'
//   var padiv1=document.getElementById("div1")
//   var oSvg=document.createElementNS(svgNs,'svg');
//   oSvg.setAttribute("xmlns",svgNs)
//   oSvg.setAttribute("width",'100%')
//   oSvg.setAttribute("height",'100%')
//   padiv1.appendChild(oSvg)
// }
// 2.0
// var svgNs='http://www.w3.org/2000/svg'
// var padiv1=document.getElementById("div1")
// function createTag(tag,objAttr){
// var oSvg=document.createElementNS(svgNs,tag);
// for(let key in objAttr){
// oSvg.setAttribute(key,objAttr[key])
// }
// return oSvg
// };
// var oSvg=createTag('svg',{"xmlns":svgNs,"height":'100%',width:'100%'})
// var oG=createTag('g',{"style":"cursor: pointer"})
// var oline1=createTag('line',{"x1":"20","y1":"50","x2":"100","y2":"100",'stroke':"#ccc"})
// var oline2=createTag('line',{"x1":"20","y1":"50","x2":"100","y2":"100",'stroke':"transparent", "stroke-width":"10" })
// var orect=createTag('rect',{"x":"50","y":"65","width":"20","height":"20",'fill':"#999", "rx":"5" ,"ry":"5"})
// var otext=createTag('text',{"x":"60","y":"80","fill":"#ffff","font-size":"14",'text-anchor':"middle" })
// otext.innerHTML='?'
// oG.appendChild(oline1)
// oG.appendChild(oline2)
// oG.appendChild(orect)
// oG.appendChild(otext)
// oSvg.appendChild(oG)
// padiv1.appendChild(oSvg)
//3.0
var svgNs='http://www.w3.org/2000/svg'
var padiv1=document.getElementById("div1")
div1.style.width="780px"
div1.style.height="400px"
var opX=padiv1.offsetWidth/2
var opY=padiv1.offsetHeight/2
var obj={
centerNode:{text:'科鲁兹'},
otherNode:[
  {x:100,y:100,text:'易车网'},
  {x:50,y:200,text:'秒懂'},
  {x:700,y:250,text:'svg'},
]
}
function createTag(tag,objAttr){
var oSvg=document.createElementNS(svgNs,tag);
for(let key in objAttr){
oSvg.setAttribute(key,objAttr[key])
}
return oSvg
};
function addTag(){
var oSvg=createTag('svg',{"xmlns":svgNs,"height":'100%',width:'100%'});
for(let i=0;i<obj.otherNode.length;i++){
    addOtherTag(obj.otherNode[i],oSvg)
}
var oG=createTag('g',{"style":"cursor: pointer"})
var ocircle=createTag('circle',{"cx":opX ,"cy":opY ,"r":"60","fill":"white","stroke":"red" ,"stroke-width":"1"})
var otext=createTag('text',{"x":opX ,"y":opY+5 ,"fill":"#000" ,"font-size":"12" ,"text-anchor":"middle" })
otext.innerHTML=obj.centerNode.text;
oG.appendChild(ocircle)
oG.appendChild(otext)
oSvg.appendChild(oG)
padiv1.appendChild(oSvg)
}
addTag()
function addOtherTag(othterAttr,oSvg){
var oG=createTag('g',{"style":"cursor: pointer"})
var oline1=createTag('line',{"x1":othterAttr.x,"y1":othterAttr.y,"x2":opX,"y2":opY,'stroke':"#ccc"})
var oline2=createTag('line',{"x1":othterAttr.x,"y1":othterAttr.y,"x2":opX,"y2":opY,'stroke':"transparent", "stroke-width":"10" })
var orect=createTag('rect',{"x":(opX+othterAttr.x)/2-10,"y":(opY+othterAttr.y)/2-10,"width":"20","height":"20",'fill':"#999", "rx":"5" ,"ry":"5"})
var otext=createTag('text',{"x":(opX+othterAttr.x)/2,"y":(opY+othterAttr.y)/2+8,"fill":"#ffff","font-size":"14",'text-anchor':"middle" })
otext.innerHTML='?'
oG.appendChild(oline1)
oG.appendChild(oline2)
oG.appendChild(orect)
oG.appendChild(otext)
oSvg.appendChild(oG)


var oG=createTag('g',{"style":"cursor: pointer"})
var ocircle=createTag('circle',{"cx":othterAttr.x ,"cy":othterAttr.y ,"r":"40","fill":"white","stroke":"red" ,"stroke-width":"1"})
var otext=createTag('text',{"x":othterAttr.x,"y":othterAttr.y+5 ,"fill":"#000" ,"font-size":"12" ,"text-anchor":"middle" })
otext.innerHTML=othterAttr.text;
oG.appendChild(ocircle)
oG.appendChild(otext)
oSvg.appendChild(oG)
}
</script>

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas练习</title>
</head>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  canvas{
    display: block;
 margin: 20px auto;
 border:1px solid #333;
  }
</style>
<body>
<!-- 
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘 -->
<!-- <canvas width="600" height="600" id="mycanvas">
  当前浏览器版本不支持,请升级浏览器
</canvas> -->
<canvas  id="mycanvas">
  当前浏览器版本不支持,请升级浏览器
</canvas>
<!-- 
  canvas的width与height不要用样式设置,如果设置会出现拉深失真 
  canvas标签包含文字只在低版本显示
-->
<!-- <button id="btn1">画一个矩形</button>
<button id="btn2">画一个矩形边框</button>
<button id="btn3">清除画布</button> -->
</body>
</html>
<script>
// 像素化
// canvas绘制一个图形，一旦绘制成功，canvas就像素话，失去修改已经在画布的内容的能力
//动画思想
//清屏->更新->渲染
// ctx.fillStyle="blue";
// var left=100;
// setInterval(() => {
//   ctx.clearRect(0,0,600,600);
//   left++;
//   ctx.fillRect(left,100,100,100)
// },1);
//面向对象
// var canvars=document.getElementById('mycanvas')
// var ctx=canvars.getContext("2d")
// function Rect(x,y,w,h,color){
//   //维护状态
//   this.x=x;
//   this.y=y;
//   this.w=w;
//   this.h=h;
//   this.color=color;
// }
// Rect.prototype.updata=function(){
// this.x++;
// }
// Rect.prototype.render=function(){
//   ctx.fillStyle=this.color;
//   ctx.fillRect(this.x,this.y,this.w,this.h)
// }
// var r1=new Rect(100,100,50,50,'red')
// var r2=new Rect(10,180,7,50,'blue')
// setInterval(() => {
//   ctx.clearRect(0,0,canvars.width,canvars.height)
//   r1.updata()
//   r1.render()
//   r2.updata()
//   r2.render()
// }, 10);
// 绘制矩形功能
var btn1=document.getElementById('btn1');
var btn2=document.getElementById('btn2');
var btn3=document.getElementById('btn3');
var canvars=document.getElementById('mycanvas')
var ctx=canvars.getContext("2d")
// 矩形填充
// btn1.οnclick=function(){
//     ctx.fillStyle="green";
    // 矩形坐标x，坐标y,宽，高
    // ctx.fillRect(100,100,100,100)
// }
// 绘制边框
// btn2.οnclick=function(){
    // ctx.strokeStyle="red";
    // 绘制坐标x，坐标y,宽，高
    // ctx.strokeRect(300,100,100,100)
// }
//清除画布
// btn3.οnclick=function(){
  // 清除坐标x，坐标y,宽，高
  // ctx.clearRect(0,0,600,600)
// }
//绘制路径
// 绘制需要既定的步骤
// ctx.beginPath()
// 设置路径的起点
// ctx.moveTo(100,100)
// 画出路径
// ctx.lineTo(200,200)
// ctx.lineTo(300,150)
// ctx.lineTo(150,100)
// 封闭路径
// ctx.closePath()
// 填充已绘制的路径
// ctx.strokeStyle='red';
//stroke绘制不设置封闭路径不会自封闭
// ctx.stroke();
// ctx.fillStyle="green";
//fill填充不设置封闭路径会自封闭
// ctx.fill()
//圆弧
// ctx.beginPath();
 //圆弧圆心坐标x，圆心坐标y,半径，起始点,结束点（若为数字，则代表一个圆弧弧度，顺时针差为7则为圆）,绘制方向是否逆时针
// ctx.arc(200,200,100,0,1,true)
// ctx.strokeStyle="red"
// ctx.stroke()
//圆
// ctx.beginPath();
 //圆弧圆心坐标x，圆心坐标y,半径，起始点,结束点（若为数字，则代表一个圆弧弧度，顺时针差为7则为圆）,绘制方向是否逆时针
// ctx.arc(410,200,100,0,2*Math.PI,true)
// ctx.strokeStyle="red"
// ctx.stroke()
// //案例-炫彩小球
// function Ball(x,y,r){
//   this.x=x;
//   this.y=y;
//   //设置半径
//   this.r=r;
//   //设置随机色
//   this.color=getRandom();
//   //设置行进方向
//   this.dx=parseInt(Math.random()*10)-5
//   this.dy=parseInt(Math.random()*10)-5
//   BallArr.push(this)
// }
// // 更新
// Ball.prototype.updata=function(){
//   this.x+=this.dx;
//   this.y+=this.dy;
//   this.r-=0.5;
//   if(this.r<0){
//     this.remove()
//   }
// }
// //删除
// Ball.prototype.remove=function(){
//    for(let i=0;i<BallArr.length;i++){
//     if(BallArr.i==this){
//       BallArr.splice(i,1)
//     }
//  }
// }
// //渲染
// Ball.prototype.render=function(){
//     ctx.beginPath()
//     ctx.arc(this.x,this.y,this.r,0,2*Math.PI,false)
//     ctx.fillStyle=this.color;
//     ctx.fill()
// };
// canvars.addEventListener('mousemove',function(event){
//   new Ball(event.offsetX,event.offsetY,30)
// })
// var  BallArr=[];
// setInterval(() => {
//   ctx.clearRect(0,0,canvars.width,canvars.height)
//  for(let i=0;i<BallArr.length;i++){
//    if(BallArr[i]){
//     BallArr[i].updata()
//     BallArr[i].render()
//    }
//  }
// }, 500);
// //随机色
// function getRandom(){
//   let allType="0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
//   let allTypeArr=allType.split(',')
//   let color="#";
//   for(let i=0;i<6;i++){
//     let random=parseInt(Math.random()*allTypeArr.length);
//     color +=allTypeArr[random]
//   }
//   return color
// }
//碰壁小球反弹连线
canvars.width=document.documentElement.clientWidth-30;
canvars.height=document.documentElement.clientHeight-30;
let BallArr=[]
function Ball(){
  this.x=parseInt(Math.random()*canvars.width)
  this.y=parseInt(Math.random()*canvars.height)
  this.r=10;
  this.color=getRandom()
  this.dx=parseInt(Math.random()*10)-5
  this.dy=parseInt(Math.random()*10)-5;
  BallArr.push(this);
  //暂存当前下标
  this.index=BallArr.length-1
}
//更新
Ball.prototype.updata=function(){
  this.x+=this.dx;
  this.y+=this.dy;
  //当小球出屏幕反弹
  if(this.x<this.r||this.x>canvars.width-this.r){
    this.dx=-this.dx
  }
    if(this.y<this.r||this.y>canvars.height-this.r){
    this.dy=-this.dy
  }
}
//渲染
Ball.prototype.render=function(){
  ctx.beginPath();
  //透明度值0到1
  ctx.globalAlpha=1;
  ctx.arc(this.x,this.y,this.r,0,2*Math.PI,false);
  ctx.fillStyle=this.color;
  ctx.fill()

  //画线连线逻辑
  for(let i=this.index;i<BallArr.length;i++){
    if(Math.abs(BallArr[i].x-this.x)<150&&Math.abs(BallArr[i].y-this.y)<150){
      ctx.strokeStyle=getRandom()
      ctx.globalAlpha=10/Math.sqrt(Math.pow(BallArr[i].x-this.x,2))+Math.sqrt(Math.pow(BallArr[i].y-this.y,2))
      ctx.beginPath();
      ctx.moveTo(this.x,this.y)
      ctx.lineTo(BallArr[i].x,BallArr[i].y)
      ctx.closePath();
      ctx.stroke()
    }
  }
}
for(let i=0;i<80;i++){
  new Ball()
}
function getRandom(){
  let allType="0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
  let allTypeArr=allType.split(',')
  let color="#";
  for(let i=0;i<6;i++){
    let random=parseInt(Math.random()*allTypeArr.length);
    color +=allTypeArr[random]
  }
  return color
}
setInterval(() => {
  ctx.clearRect(0,0,canvars.width,canvars.height)
  for(let i=0;i<BallArr.length;i++){
    BallArr[i].updata()
  BallArr[i].render()
}
}, 20);
</script>
SuperMario96
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Canvas 和 SVG 的区别是什么？
小陈的博客
05-20 2731
首先简单说一下Canvas canvas是H5中新增的标签，官方解释说canvas是一块画布，可以在网页中绘制图像，话不多说，来个例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" cont
酷炫的svg与canvas结合动画特效代码
03-20
在本主题“酷炫的svg与canvas结合动画特效代码”中，我们将探讨如何利用SVG和Canvas的优点，创建出引人入目的动态效果。SVG的优势在于其矢量特性，图形在放大时不会失真，适合制作logo、图标等；Canvas则擅长实时...
经典面试题（讨论canvas与svg的区别）
热门推荐
helloword_chen的博客
11-11 2万+
讨论关于canvas和svg的区别。首先canvas是html5提供的新元素，而svg存在的历史要比canvas久远，已经有十几年了。svg并不是html5专有的标签，最初svg是用xml技术（超文本扩展语言，可以自定义标签或属性）描述二维图形的语言。在H5中看似canvas与svg很像，但是，他们有巨大的差别。   首先，从它们的功能上来讲，canvas可以看做是一个画布。，其绘制出来的图形为
Canvas和SVG有什么区别
weixin_30512043的博客
08-17 109
在项目开发中也许会涉及到图形，经常用到的就是svg和canvas两种画图方式，下面就让我们看一看他们两者的区别： svg绘制出来的每一个图形的元素都是独立的DOM节点，能够方便的绑定事件或用来修改。canvas输出的是一整幅画布 svg输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会是真和锯齿。而canvas输出标量画布，就像一张图片一样，放大会失真或者锯齿 转载...
SVG和Canvas的区别
foreverling_ling的博客
12-12 1778
在HTML5时代，Canvas被提及的次数越来越多，但是你对SVG了解么？SVG和Canvas一样，可以在html文件里面描绘出各种各样的图形。区别1）SVG是矢量图，放大不失真，而Canvas是位图，由像素点组成，放大会失真 2）Canvas相较于SVG，支持的颜色数更多，更便于绘制色彩丰富的图像 3）Canvas基于HTML，而SVG基于XML兼容性SVG和Canvas都只能在IE8（不包含
SVG 与 Canvas
wgchen
10-17 571
SVG 与 Canvas
酷炫的svg与canvas结合动画.zip
07-04
本项目“酷炫的svg与canvas结合动画”旨在探索如何将这两者巧妙融合，以实现更加丰富、细腻的网页动画。以下是关于SVG和Canvas以及它们结合使用的详细知识点： 1. **SVG基础知识**： - SVG是一种基于XML的矢量图形...
HTML5中Canvas与SVG的画图原理比较
09-28
而且，Canvas对于文本的渲染能力也不如SVG，对于复杂文本的处理效果较差。尽管如此，Canvas特别适合于那些需要频繁重画多个对象的图形游戏。另外，Canvas的好处是它可以将最终绘制的图片保存为PNG或者JPG格式，这...
svg转img所需 html2canvas方法，svg转canvas所需canvg方法
04-26
- 调用`canvg`方法，传入Canvas元素和SVG数据作为参数，开始在Canvas上绘制SVG。 示例代码： ```javascript var svgElement = document.getElementById('mySVG'); var svgData = svgElement.outerHTML; // ...
最新版canvg.js，完美支持 svg 转 canvas
06-21
最新canvg.js，完美将svg转为canvas
canvas和svg的区别？
最新发布
zybijiso666的博客
10-13 534
Canvas和SVG是两种不同的绘图方法，它们之间的主要区别如下：
Canvas和SVG的区别
Cupid
04-27 301
Canvas和SVG的区别： 1、Canvas是使用javaScript程序绘制动态生成的，SVG是使用xml文档描述来绘图。从这点来看：SVG更适合用来做动态交互，而且SVG绘图更容易编辑，只需要增加或移除相应的元素就可以了。 2、SVG是基于矢量的，所以它能够很好的处理图形大小的变大。canvas是基于位图的图像，他不能改变大小，只能缩放显示 3、canvas支持的颜色比SVG多 ...
H5 Canvas与SVG的比较
AaronChen01的博客
08-16 1021
转载：https://www.w3school.com.cn/html5/html_5_canvas_vs_svg.asp 两者都能够在在浏览器中绘图，但两者之间还是不一样的 Canvas 通过Javascript来绘制2D图形。 是逐像素进行渲染的。 其位置发生改变，会重新进行绘制。 SVG 一种使用XML描述的2D图形的语言 SVG基于XML意...
canvas和svg的区别.
Charlene_lx的博客
05-08 700
都是2D作图,svg是矢量图,canvas是位图,canvas是逐像素进行渲染的,适合游戏. svg缩放不影响显示,svg对象的属性发生变化，那么浏览器能够自动重现图形。 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象 svg 1\不依赖分辨率 2\支持事件处理器 3\最适合带有大型渲染区...
canvas和SVG的区别
fs821031547的博客
11-04 1118
从性能方面选择 性能对于高流量的网站来说是绝对关键的。虽然 Canvas 通常被视为具有高性能，但是并不意味着它就是明显的选择。下图显示了 SVG 对象和 Canvas 对象之间在呈现时间上的差异。 一般情况下，随着屏幕大小的增大，画布将开始降级，因为需要绘制更多的像素。随着屏幕上的对象数目增多，SVG 将开始降级，因为我们正不断将这些对象添加到 DOM 中。这些度量不一定准确，以
canvas和svg的区别
JsRoccketq的博客
08-19 251
canvas和svg的区别 canvas是由Apple私有技术发展而来的，是从小众发展到广泛的被接受，注重的栅格图像处理。使用JavaScript程序绘图（动态生成），是基于像素（动态点阵图），目前只能提供2D绘制函数，是一种HTML的元素类型，依赖于HTML，只能通过脚本绘制图像，但是目前只有主流的浏览器和IE9+以上的浏览器兼容。 svg是一套独立的矢量图形语言，在2003年的时候成为w3c标...
Canvas 和 SVG 的区别：
肖肖肖丽珠的博客
05-28 192
SVG 　　　　SVG 是一种使用 XML 描述 2D 图形的语言。 　　　　SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。 　　　　在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。 　　　　特点： 　　　　 　　不依赖分辨率 　　　　 　　支持事件处理器 　　　　 　　最适合带有大型渲染区域的应用程序（比如谷歌地图） 　　　　　　 复杂度高会减慢渲染速度（任何过度使
Canvas 和 SVG 的区别
jingtian678的博客
04-04 450
SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG是W3C制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。 什么是SVG？ 　　SVG 指可伸缩矢量图形 (Scalabl
前端, svg与canvas有什么优缺点
07-12
SVG（Scalable Vector Graphics）和Canvas是用于在网页上绘制图形的两种主要技术。它们各自具有一些优点和缺点，下面是它们的特点： SVG的优点： 1. 矢量图形：SVG使用矢量图形，图像可以按比例缩放而不会失真。这使得SVG非常适合绘制图标、图表和其他需要高质量缩放的图形。 2. 声明性语法：SVG使用XML语法来描述图形，使其易于阅读、理解和修改。可以使用CSS样式和JavaScript来控制和交互SVG元素。 3. 可搜索性和可访问性：由于SVG是基于文本的，因此可以通过搜索引擎索引，并且对于屏幕阅读器等辅助技术也更友好。 SVG的缺点： 1. 复杂性：复杂的SVG图形可能会导致性能下降，特别是在处理大规模或复杂动画时。 2. 浏览器兼容性：尽管现代浏览器都支持SVG，但在某些旧版本的浏览器中可能存在兼容性问题。 Canvas的优点： 1. 像素级控制：Canvas提供了一个像素级别的画布，可以通过JavaScript直接绘制图形和动画。这使得Canvas非常适合实时绘图和游戏开发。 2. 性能优势：由于Canvas直接操作像素，绘制速度快，特别适用于大规模或复杂的动画效果。 3. 灵活性：Canvas可以处理各种类型的图形和动画，并且对于绘制和变换图形提供了更多的自由。 Canvas的缺点： 1. 无法缩放：Canvas中绘制的图形是基于像素的，所以在缩放时会有失真。如果需要高质量缩放，可能需要进行额外的处理。 2. 不支持事件处理：Canvas绘制的图形无法直接添加事件处理程序，需要手动编写JavaScript代码来实现交互。 综上所述，选择使用SVG还是Canvas取决于具体的需求。如果需要高质量缩放、可搜索性和可访问性，以及对于简单图形和图标的绘制，SVG是一个不错的选择。如果需要像素级控制、性能优势以及对于实时绘图和游戏开发的需求，那么Canvas更适合。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值