HTML5实验室-canvas世界：实验1 奥运五环

最新推荐文章于 2021-11-15 21:42:25 发布

freepander

最新推荐文章于 2021-11-15 21:42:25 发布

阅读量2.5k

点赞数

分类专栏： javascript 前端文章标签： javascript

本文链接：https://blog.csdn.net/u011226892/article/details/9322433

版权

这篇博客是《HTML5实验室——Canvas世界》的读书笔记，作者通过Canvas元素来绘制奥运五环。首先创建canvas，然后设置线条颜色和宽度。初始尝试中，后画的圆会覆盖前面的圆，缺乏层次感。为了解决这个问题，作者采用arc函数，精确控制圆环的位置和方向，最终成功实现环环相扣的奥运五环效果。

摘要由CSDN通过智能技术生成

《HMLT5实验室——Canvas世界》读书笔记张磊编著电子工业出版社

用户Canvas元素画一个奥运五环

先看效果图

首先要有一个canvas元素

<canvas id="myCanvas" width="400" height="200" style="border:1px solid #c3c3c3">
your browser does not support hte canvas element.
<br/>对不起,您的浏览器不支持canvas元素
</canvas>

然后利用arc函数画出五个圆

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
	ctx.beginPath();
	ctx.arc(70,70,40,0,Math.PI*2,false);
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(160,70,40,0,Math.PI*2,false);
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(2