H5学习之7 canvas的运用2 画圆

最新推荐文章于 2022-03-30 08:05:51 发布

GOGOGOAAAA

最新推荐文章于 2022-03-30 08:05:51 发布

阅读量711

点赞数 1

分类专栏： h5 文章标签： html5 canvas

本文链接：https://blog.csdn.net/qq_29469941/article/details/52027179

版权

h5 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

</head>
<body style="margin: 0">

<canvas id="myCanvas" width="300" height="150"  style=" border:1px solid black ;" >
   <!-- body里创建一个cavas画板，直接设定他的长度宽度，样式里的边框。-->
</canvas>

<script type="text/javascript">
    var c=document.getElementById("myCanvas");/*获取创建的canvas*/
    var cxt= c.getContext("2d");/*创建一个画笔与之关联*/
    cxt.fillStyle="rgb(0,255,0)";
   /* 填充颜色 "rgb(0,0,0)"这是一种颜色的表现形式。
    还有就是#ffffff 一共六 位，也是RGB，十六位进制
    还有别的颜色形式 具体的参见http://www.w3school.com.cn/cssref/css_colors_legal.asp CSS   合法颜色值*/
    cxt.beginPath();/*起始一条路径，或者重置当前路径。*/
    cxt.arc(70,30,30,0,Math.PI*2,true);
    /*画圆函数，（坐标X，坐标Y，半径，起始角度，结束角度，顺时针或者逆时针）
    * http://www.w3school.com.cn/tags/canvas_arc.asp
    * */
    cxt.closePath();/*创建从当前点回到起始点的路径*/
    cxt.fill();/*填充当前绘图（路径），没有这个，绘制不出来*/


</script>

</body>
</html>

具体效果如下：

思路解释如下：

在body里创建一个canvas标签用作画板。

<canvas id="myCanvas" width="300" height="150"  style=" border:1px solid black ;" >
   <!-- body里创建一个cavas画板，直接设定他的长度宽度，样式里的边框。-->
</canvas>

并且在canvas标签里设置一些他的属性。属性赋值时一般都是 xx="yyy" 而属性里具有别的属性还要赋值时，格式是 xx:y (可能有特殊情况，因为我学习的还不是很多)

接着将绘制函数写在script标签里，sc标签直接写在body里，也可写在head里。

<script type="text/javascript">
    var c=document.getElementById("myCanvas");/*获取创建的canvas*/
    var cxt= c.getContext("2d");/*创建一个画笔与之关联*/
    cxt.fillStyle="rgb(0,255,0)";
   /* 填充颜色 "rgb(0,0,0)"这是一种颜色的表现形式。
    还有就是#ffffff 一共六 位，也是RGB，十六位进制
    还有别的颜色形式 具体的参见http://www.w3school.com.cn/cssref/css_colors_legal.asp CSS   合法颜色值*/
    cxt.beginPath();/*起始一条路径，或者重置当前路径。*/
    cxt.arc(70,30,30,0,Math.PI*2,true);
    /*画圆函数，（坐标X，坐标Y，半径，起始角度，结束角度，顺时针或者逆时针）
    * http://www.w3school.com.cn/tags/canvas_arc.asp
    * */
    cxt.closePath();/*创建从当前点回到起始点的路径*/
    cxt.fill();/*填充当前绘图（路径），没有这个，绘制不出来*/
</script>

cxt.beginPath(); cxt.closePath();不要这两句也能绘制成功，可能这两句与绘制多个对象时有关系。还没有学习到。下来再研究。

GOGOGOAAAA

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5学习之7 canvas的运用2 画圆

html>lang="en"> charset="UTF-8"> style="margin: 0">id="myCanvas" width="300" height="150" style=" border:1px solid black ;" > 里创建一个cavas画板，直接设定他的长度宽度，样式里的边框。-->type="text/javascr
复制链接

扫一扫