初步学习图形
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>web前端开发基础</title>
<link rel="stylesheet" type="text/css" href="d3_basic.css">
</head>
<body>
<div id="main">
<div id="top">
<br>
D3.js 可视化基础
</div>
<h1>svg</h1>
<div id="middle">
<div id="left">
<div id="left1">
<h1>图形元素</h1>
<h2>矩形和圆角矩形</h2>
<svg >
<rect id="rect1" x="20" y="20" />
<rect id="rect1" x="20" y="140" rx="20" ry="30" />
</svg>
<h2>圆和椭圆</h2>
<svg>
<circle cx="85" cy="85" r="80" />
<ellipse cx="115" cy="230" rx="100" ry="60" />
</svg>
<defs>
<marker id="arrow"
markerUnits="strokeWidth"
markerWidth="12"
markerHeight="12"
viewBox="0 0 12 12"
refX="6"
refY="6"
orient="auto" >
<path d="M2,2 L10,6 L2,10 L6,6 L2,2" style="fill:#000000;" />
</marker>
</defs>
<h2>标记</h2>
<svg>
<line x1="10" y1="10" x2="200" y2="50" stroke="red" stroke-width="2" marker-end="url(#arrow)" />
<path id="path1" d="M20,70 T80,100 T160,80 T200,190" />
</svg>
<defs>
<filter id="GaussianBlur">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>
</defs>
<h2>滤镜</h2>
<svg>
<rect x="20" y="10" width="150px" height="100px" fill="blue" />
<rect x="20" y="150" width="150px" height="100px" fill="blue" filter="url(#GaussianBlur)" />
</svg>
</div>
<div id="left2">
<h1>line</h1>
<h2>线段</h2>
<svg>
<line id="line1" x1="20" y1="20" x2="200" y2="200" />
</svg>
<h2>多边形和折线</h2>
<svg>
<polygon points="100,20 20,90 60,160 140,160,180,90" />
<polyline points="200,100 260,200 250,240 100,240 180,180" />
</svg>
<defs>
<linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#f00" />
<stop offset="100%" stop-color="#00f" />
</linearGradient>
</defs>
<h2>渐变</h2>
<svg>
<rect id="rect2" x="20" y="20" width="160" height="100" />
</svg>
<h2>C</h2>
<svg>
</svg>
</div>
</div>
<div id="right">
<div id="right1">
<h4>路径(大写字母：绝对坐标，小写字母：相对坐标)</h4>
<h2>移动类/直线类</h2>
<svg>
<path d="M30,30 L250,270 M30,30 H270 M30,30 V280 M30,280 L70,230 M270,30 L230,80 M230,80 L250,270
M70,230 L250,270" style="stroke: black;stroke-width:3px" />
</svg>
<h2>曲线类(贝斯曲线)</h2>
<svg>
<path d="M10,100 C60,20 110,20 170,100 S220,180 280,100" style="fill:#fefe32;stroke: black;stroke-width:3px" />
<path d="M10,180 Q110,280 210,230 T290,230" style="fill:#fecc32;stroke: black;stroke-width:3px"/>
</svg>
<h2>A</h2>
<svg>
</svg>
<h2>B</h2>
<svg>
</svg>
</div>
<div id="right2">
<h1>绘制</h1>
<h2>弧线</h2>
<svg>
<path d="M60,60 a50,30 10 1,0 230,150 Z" style="fill:#f21c32;stroke: black;stroke-width:3px" />
</svg>
<h2>绘制文字</h2>
<svg>
<text x="20" y="100" dx="10" dy="-10" rotate="10" textLength="200"><tspan fill="red">D3</tspan> is useful</text>
<text x="20" y="210" dx="10" dy="-10" rotate="-10" textLength="200">D3 is useful</text>
</svg>
<h2>D</h2>
<svg>
</svg>
<h2>E</h2>
<svg>
</svg>
</div>
</div>
</div>
<br>
<h1>Canvas</h1>
<div id="middle">
<div id="left">
<div id="left1">
<h2>线段</h2>
<canvas id="canvas1"></canvas>
<script type="text/javascript">
var canvas1=document.getElementById("canvas1");
var ctx=canvas1.getContext("2d");
var width=canvas1.width;
var height=canvas1.height;
ctx.strokeStyle="#000000";
ctx.lineWidth=5;
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(160,120);
ctx.stroke();
</script>
<h2>二次贝塞曲线</h2>
<canvas id="canvas5"></canvas>
<script type="text/javascript">
var canvas1=document.getElementById("canvas5");
var ctx=canvas1.getContext("2d");
var width=canvas1.width;
var height=canvas1.height;
ctx.save();
ctx.strokeStyle="Black";
ctx.lineWidth=3;
ctx.beginPath();
ctx.moveTo(20,80);
ctx.quadraticCurveTo(80,20,260,60);
ctx.stroke();
ctx.restore();
</script>
<h2>图片</h2>
<canvas id="canvas9"></canvas>
<script type="text/javascript">
var canvas9=document.getElementById("canvas9");
var ctx=canvas9.getContext("2d");
var width=canvas9.width;
var height=canvas9.height;
var img=new Image();
img.src="img1.jpg";
img.onload=function(){
ctx.drawImage(img,3,3,200,100);
}
ctx.restore();
</script>
</div>
<div id="left2">
<h2>矩形</h2>
<canvas id="canvas2"></canvas>
<script type="text/javascript">
var canvas1=document.getElementById("canvas2");
var ctx=canvas1.getContext("2d");
var width=canvas1.width;
var height=canvas1.height;
ctx.strokeStyle="#deac78";
ctx.fillStyle="#34f789";
ctx.lineWidth=2;
ctx.rect(20,20,220,100);
ctx.fill();
ctx.stroke();
</script>
<h2>三次贝塞曲线</h2>
<canvas id="canvas6"></canvas>
<script type="text/javascript">
var canvas1=document.getElementById("canvas6");
var ctx=canvas1.getContext("2d");
var width=canvas1.width;
var height=canvas1.height;
ctx.save();
ctx.strokeStyle="red";
ctx.lineWidth=3;
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(60,60,130,110,210,70);
ctx.stroke();
ctx.restore();
</script>
<h2>渐变</h2>
<canvas id="canvas10"></canvas>
<canvas id="canvas3"></canvas>
<script type="text/javascript">
var canvas1=document.getElementById("canvas10");
var ctx=canvas1.getContext("2d");
var width=canvas1.width;
var height=canvas1.height;
var linearGrad=ctx.createLinearGradient(100,0,250,0);
linearGrad.addColorStop(0,"blue");
linearGrad.addColorStop(1,"white");
ctx.fillStyle=linearGrad;
ctx.fillRect(20,20,100,100);
</script>
</div>
</div>
<div id="right">
<div id="right1">
<h2>圆</h2>
<canvas id="canvas3"></canvas>
<script type="text/javascript">
var canvas1=document.getElementById("canvas3");
var ctx=canvas1.getContext("2d");
var width=canvas1.width;
var height=canvas1.height;
ctx.fillStyle="#546fd1";
ctx.beginPath();
ctx.arc(100,60,50,0,Math.PI*2);
ctx.fill();
ctx.stroke();
ctx.restore();
</script>
<h2>文字</h2>
<canvas id="canvas7"></canvas>
<script type="text/javascript">
var canvas1=document.getElementById("canvas7");
var ctx=canvas1.getContext("2d");
var width=canvas1.width;
var height=canvas1.height;
ctx.font="bold 28px simhei";
ctx.textAlign="center";
ctx.fillStyle="#de9988";
ctx.fillText("Canvas 绘图",100,100);
ctx.stroke();
</script>
</div>
<div id="right2">
<h2>多边形</h2>
<canvas id="canvas4"></canvas>
<script type="text/javascript">
var canvas1=document.getElementById("canvas4");
var ctx=canvas1.getContext("2d");
var width=canvas1.width;
var height=canvas1.height;
ctx.strokeStyle="green";
ctx.fillStyle="#456f23";
ctx.lineWidth=3;
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(120,30);
ctx.lineTo(150,100);
ctx.lineTo(90,130)
ctx.closePath();
ctx.fill();
ctx.stroke();
</script>
<h2>变形</h2>
<canvas id="canvas8"></canvas>
<script type="text/javascript">
var canvas1=document.getElementById("canvas8");
var ctx=canvas1.getContext("2d");
var width=canvas1.width;
var height=canvas1.height;
ctx.save();
ctx.scale(2,3);
ctx.fillRect(10,1,30,10);
ctx.restore();
ctx.save();
ctx.rotate(Math.PI*0.2);
ctx.fillRect(120,10,30,10);
ctx.restore();
ctx.save();
ctx.translate(50,50);
ctx.fillRect(30,60,30,30);
ctx.restore();
</script>
</div>
</div>
</div>
<div id="bottom">
<br><br>
</div>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
