canvas里方法的应用总结

Posted 夜守护者

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了canvas里方法的应用总结相关的知识,希望对你有一定的参考价值。

canvas里方法的应用总结(1)

1.canvas在低版本版本浏览器是不兼容的,可以提示用户

2.canvas使用原生js操作

画一条直线步骤流程一般为:

  • 开启画布

    <canvas id="cont" >您的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>

  • 获取画布

    var canvas=document.querySelector(#cont)

    • 获取画布的上下文

    var ctx=canvas.getContext()

    • 开启一条路径

    ctx.beginPath()

    • 确定起始点

    ctx.moveTo(100,100)

    • 确定结束点

    ctx.lineTo(400,400)

    • 着色

    ctx.stroke()

    • 关闭路径

    ctx.closePath()

    3.画矩形常用的方法有

    • fillRect(x,y,width,height):x,y是代表这个矩形左上角的坐标,width,height代表这个矩形的宽高

    • fillStyle:填充矩形整个图像颜色

      在使用这两个方法时,先填充颜色,后创建矩形,否则颜色填充不上去

      fill():可以为整个画布里图像填充同一种颜色

    ​ 4.清除画布某个地方:用clearRect()方法

    ​ 5.画圆用到的方法: arc(x,y,radius,startAngle,endAngle,counterclockwise)

    ​ arc(x,y,radius,startAngle,endAngle,counterclockwise)
    ​ x,y 描述弧的圆心坐标
    ​ radius 描述弧的圆型的半径
    ​ startAngle,endAngle
    ​ 沿着圆指定弧的开始点和结束点的一个角度。这个角度用弧度来测量
    ​ 沿着x轴正半轴的三点钟方向的角度为0,角度沿着逆时针的方向而增加
    ​ counterclockwise 弧沿着圆周的逆时针方向(true),还是顺时针方向(false)遍历

以上是关于canvas里方法的应用总结的主要内容,如果未能解决你的问题,请参考以下文章

canvas 绘圆加边框

Polygon for the Angle 1096C(圆心角与圆周角)

物理知识相关内容总结

[图形学]圆心角和圆周角相关问题,补充相关解答

bzoj 1043 下落的圆盘 —— 求圆心角圆周长

2022-03-28:有一个以原点为圆心,半径为1的圆。 在这个圆的圆周上,有一些点, 因为所有的点都在圆周上,所以每个点可以有很简练的表达。 比如:用0来表示一个圆周上的点,这个点就在(1,0)位置