html5学习笔记1

最新推荐文章于 2023-04-06 16:24:55 发布

code旅行者

最新推荐文章于 2023-04-06 16:24:55 发布

阅读量1.6k

点赞数

分类专栏： Html5

本文链接：https://blog.csdn.net/dotnet25/article/details/42492379

版权

Html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(0,50);
cxt.lineTo(70,80);
cxt.lineTo(10,10);
cxt.stroke();

</script>

</body>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#aabb00";
cxt.beginPath();
cxt.arc(100,50,30,0,Math.PI*1.5,false);//(圆心横坐标，圆心纵坐标，半径，圆弧起始点，圆弧终止点，逆时针或顺时针划弧)；true逆时针，false顺时针
cxt.closePath();
cxt.fill();

</script>

</body>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>


<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");//将起始位置到终止位置看作1，填充
grd.addColorStop(0.5,"#00FF00");//将起始位置到终止位置看作1，填充，本例填充0～0.5的范围
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);矩形的大小（本例灰色外边框）

</script>

</body>

code旅行者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5学习笔记1

Your browser does not support the canvas element.var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.moveTo(10,10);cxt.lineTo(150,50);cxt.lineTo(0,50);cxt.lineTo(70,80);
复制链接

扫一扫