<!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>