Canvas画一个头像

最新推荐文章于 2023-03-25 09:14:48 发布

yinyongxian

最新推荐文章于 2023-03-25 09:14:48 发布

阅读量1.2k

点赞数

分类专栏： Html 文章标签： html Canvas html5 标签

本文链接：https://blog.csdn.net/yinyongxian/article/details/42458399

版权

Html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

ctx.arc(X,Y,半径,起始位置,结束位置，true);

true:顺时针

<span style="font-size:18px;"><!DOCTYPE html>
<html>
<body>

<!--画布-->
<canvas id="myCanvas" width="400" height="300"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
<!--画大圆-->
<!--"myCanvas"这是Canvas标签-->
var c = document.getElementById("myCanvas");
<!--画布的效果是2d效果-->
var ctx = c.getContext("2d");
<!--开启新的一条路径-->
ctx.beginPath();
<!--沿顺时针路线-->
ctx.arc(200,150,140,0,2*Math.PI);
ctx.stroke();

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(140,100,20,0,2*Math.PI);
ctx.stroke();

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(260,100,20,0,2*Math.PI);
ctx.stroke();

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(200,200,60,0.2*Math.PI,0.8*Math.PI);
ctx.stroke();

<!--作者签名-->
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
<!--字体大小是：20px,字体样式：Georgia-->
ctx.font="20px Georgia";
ctx.fillText("尹永贤",340,294);
</script> 

</body>
</html></span>

yinyongxian

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Canvas画一个头像

ctx.arc(X,Y,半径,起始位置,结束位置，true);true:顺时针<canvas id="myCanvas" width="400" height="300"style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.var c = do
复制链接

扫一扫

专栏目录