HTML5基础之Canvan和SVG元素例子

最新推荐文章于 2022-10-27 17:22:51 发布

万万君

最新推荐文章于 2022-10-27 17:22:51 发布

阅读量176

点赞数 1

分类专栏：笔记 HTML 文章标签： html svg canvas

本文链接：https://blog.csdn.net/devin_xin/article/details/105266281

版权

笔记同时被 2 个专栏收录

80 篇文章 0 订阅

订阅专栏

HTML

35 篇文章 0 订阅

订阅专栏

<html>
<head>
</head>
<p>Use HTML5 Canvas Element </p>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<canvas id="myCanvas1" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<canvas id="myCanvas2" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
</br>

<p> Use THML5 SVG Element </p>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
   <polygon points="100,10 40,180 190,60 10,60 160,180"
   style="fill:red;stroke:blue;stroke-width:3;fill-rule:evenodd;" />
</svg>
</br>
<p> Use SVG File in THML(use iframe element)</p>
</br>
<iframe src="svgFile/rect3.svg" width="300" height="300">
</iframe>
<iframe src="svgFile/circle1.svg" width="200" height="100">
</iframe>
<iframe src="svgFile/ellipse2.svg" width="500" height="200">
</iframe>
<iframe src="svgFile/linear1.svg" width="400" height="400">
</iframe>
<iframe src="svgFile/polygon2.svg" width="400" height="400">
</iframe>
<script type="text/javascript">
var c=document.getElementById("myCanvas2");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>

<script type="text/javascript">
var c=document.getElementById("myCanvas1");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>
<!--frameset framespacing=0 border=1 rows="60,*">
 <frame name="top" src="report/top.xml" scrolling=no noresize>
 <frame name="content" src="report/summary.xml" noresize>
 </frameset>
</frameset-->
</html>

运行结果：
在这里插入图片描述

万万君

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5基础之Canvan和SVG元素例子

<html><head></head><p>Use HTML5 Canvas Element </p><canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not suppo...
复制链接

扫一扫