canvas基础2 - arc - 画弧线

系列文章目录

本文是canvas基础2 - arc - 画弧线,通俗易懂,小白也没烦恼,根据慕课网liuyubobobo老师的视频课学习整理
视频课指路:慕课网 liuyubobobo老师 炫丽的倒计时效果Canvas绘图与动画基础

1、arc方法绘制弧线

  1. context.arc(圆心坐标x,圆心坐标y,半径值,从哪一个弧度值为始,结束弧度,弧度为顺时针还是逆时针默认false为顺时针)
    canvas基础2 - arc - 画弧线_第1张图片
  2. startingAngleendingAngle说明
    canvas基础2 - arc - 画弧线_第2张图片

    2、画圆

  3. 顺时针画圆

    
     当前浏览器不支持canvas,请更换浏览器后再试
    
    

    canvas基础2 - arc - 画弧线_第3张图片

  4. 逆时针画圆

    
     当前浏览器不支持canvas,请更换浏览器后再试
    
    

    canvas基础2 - arc - 画弧线_第4张图片

3、closePath特性

closePath代表结束这个路径,如果当前路径没有封闭上,会自动封闭这个路径
canvas基础2 - arc - 画弧线_第5张图片
canvas基础2 - arc - 画弧线_第6张图片

4、2048棋盘demo


    不能使用canvas

总结

本文为canvas第一节,之后会持续更新,大家感觉还实用的话,关注或者点个赞都可以,谢谢啦

你可能感兴趣的:(前端canvashtml)