canvas学习之初始化第一档填充圆

最新推荐文章于 2024-08-16 13:20:36 发布

爱健身的程序员sa

最新推荐文章于 2024-08-16 13:20:36 发布

阅读量278

点赞数

分类专栏： canvas学习之路文章标签：学习 javascript 前端

本文链接：https://blog.csdn.net/sassssiii/article/details/131044401

版权

canvas学习之路专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了如何在HTML5中使用Canvas元素进行2D绘图，包括获取Canvas上下文、设置填充颜色、绘制圆形以及填充规则。示例代码演示了创建一个红色填充的圆形，并解释了beginPath(),arc()和fill()等关键方法的用途。此外，文章还提及了非零规则在填充路径中的应用。

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

创建canvas

咱们就直接上代码吧

<body>
    <!-- 增加一个canvas标签，height和width都是canvas带有的属性，这里他们不需要带有px -->
    <canvas height="200" width="400" style="background:green;"></canvas>
</body>
<script>
    const canvas = document.querySelector('canvas') //获取canvas标签
    const context = canvas.getContext('2d') // getContext(value) 他的value可以有多种类，目前使用2d，也就是平面画图
    // 以上代码，我们就成功获取了一个canvas
<script>

getContex(value)
value:

‘2d’ 简单来说就是我们可以创建一个平面模型,此参数可以返回一个WebGLRenderingContext（WebGL渲染上下文）对象
‘webgl’ 或 ‘experimental-webgl‘ ，此参数可以返回一个WebGLRenderingContext（WebGL渲染上下文）对象, WebGL（全写Web Graphics Library）是一种3D绘图协议，说白了就是让我们在浏览器中绘制3d模型，这个东西我感觉咱们可以直接去看three.js了
3.‘webgl2’,此参数可以返回一个webGL2RenderingContext对象，可以用来绘制三维3D效果跟上面一样只不过就是升级过的版本
4.’bitmaprenderer’,创建一个ImageBitmapRenderingContext（位图渲染上下文），可以借助给定的ImageBitmap替换Canavs的内容。

2d模型的构建

上面都是概念性的东西，我们主要已2d为主，学会2d再说其他的
首先我们完成一个圆形的绘制（颜色填充所形成的圆）

const minRaduis = Math.min(canvas.width,canvas.height)/2//获取最大半径
context.fillStyle = 'red' //设置填充的颜色
context.beginPath() // 开始绘制
context.arc(canvas.width/2,canvas.height/2,minRaduis,0,Math.PI/2) //圆的绘制
context.fill() // 对设置的颜色进行填充