如何使用canvas绘制圆形

专业资料 > IT&计算机 > 互联网 > 文档预览

2 页 1776 浏览 19 收藏 4.9分

摘要:Canvas是HTML5中新增的元素，专门用来绘制图形，相当于在页面中放了一张“画布”，可以在里面绘制图形，但是不是指用鼠标画图，而是需要用Javascript编写需要绘制的图形的脚本。我们利用canvas可以绘制出下图：在绘制上图之前，我们先来看下相关知识点：一、开始创建路径使用beginPath方法开始创建路径。beginPath()方法表示开始一条路径，或重置当前的路径。简单来说，其实就是告诉画布，我要开始画草稿了，请把之前的草稿都清除掉。这个方法不设置参数，通过调用这个方法开始创建路径，在案例中我们需要循环绘制圆形在循环的几次创建路径的过程中，每次开始创建是都要调用beginPath()。语法是：context.beginPath();二、创建圆形路径创建圆形路径的时候，需要使用图形上下文对象的arc()方法，这个方法的定义是：arc()方法创建弧/曲线(用于创建圆或部分圆)。这个方法的语法是：这个方法使用6个参数，x为圆的中心的x坐标;y为圆的中心的y坐标;r为圆的半径;sAngle为起始角，以弧度计(弧的圆形的三点钟位置是0度);eAngle为结束角，以弧度计;counterclockwise为规定应该逆时针还是顺时针绘图(False=顺时针，true=逆时针)。arc()方法不仅可以绘制圆形，还可以绘制圆弧形，因此，必须指定起始角和结束角三、关闭路径路径创建完毕后，使用图形上下文对象的closePath()方法关闭路径。closePath()方法创建从当前点到开始点的路径。语法：context.closePath();关闭路径后，路径的创

温馨提示：当前文档最多只能预览 8 页，若文档总页数超出了 8 页，请下载原文档以浏览全部内容。

本文档由匿名用户于 2020-06-07 05:04:29上传分享

下载原文档(49.50 KB)

你可能在找

二维绘图上下文

二维绘图上下文当使用一个canvas元素的getContext(“2d”)方法时，返回的是CanvasRenderingContext2D对象，其内部表现为笛卡尔平面坐标，并且左上角坐标为(0,0)，在本平面中往右则每一个canvas元素仅有一个上下文对象。其接口如下：interfaceCanvasRenderingContext2D{//back-referencetothecanvasreadonlyattributeHTMLCanvasElementcanvas

4.6 分 31 页 | 113.00 KB | 2021-10-05 00:40
南通效果图培训：如何用3dmax绘制浮雕步骤图解

科迅教育www.ntkexun.cn南通效果图培训：如何用3dmax绘制浮雕步骤图解嗨，大家好！本周科迅教育课堂又开始啦！今天小迅姐姐为大家推荐的干货是《如何用3dmax绘制浮雕步骤图解》。浮雕，是在平面上雕刻出凹凸起伏形象的一种雕塑，是一种介于圆雕和绘画之间的艺术表现形式。浮雕的空间构造可以是三维的立体形态，也可以兼备某种平面形态；既可以依附于某种载体，又可相对独立地存在。一般地说来，为适合特定视点的观赏需要或装饰需要，浮雕相对圆雕的突出特征是经形体压缩处理后的二维或平面特性。那我们今天就来绘制一个浮雕。

4.8 分 6 页 | 1.16 MB | 2021-09-19 01:02
AI教程：如何绘制手拿郁金香的卡哇伊兔子

AI教程：如何绘制手拿郁金香的卡哇伊兔子作者:一网学最后更新时间：2016-03-1517:44:00小编：今天这篇教程手把手教大家用AI绘制一个精美的拿着郁金香的可爱兔子。还能学会图和快速给花着色，非常实用，操作也不难。一、绘制头部第一步打开AdobeIllustrator之后，创建一个宽度和高度都是600px的新的文件。通过绘制兔子的脑袋开始，我们将会用到椭圆工具（L）画一个椭圆，在下面的图像中你可以看到你需要填充颜色的色值。继续使用效果>变形>膨胀，形成头部，参数设置和下方图片一样就可以。

4.6 分 30 页 | 713.48 KB | 2021-09-29 00:20
CAD练习题(带步骤)

AutoCAD练习题10.1习题1：定数等分画圆弧◆练习说明：◆操作提示：⑴先画一条长为70的直线，然后在这条直线上6等分（如图所示）⑵使用“多段线”命令，在“指定起点:指定下一个点或[圆弧(A)/半宽 (W)]:”提示下输入d，开始绘制圆弧的方向（如图所示）⑶重复以上的操作，完成圆弧的绘制（如图所示）⑷选择“圆”命令，捕捉圆的中点，在“指定圆的半径或[直径(D)]”提Word文档示下输入35，回车⑸ 删除辅助线，添加尺寸标注（如图所示）10.2习题2：环形阵列画圆弧Word文档◆练习说明：1、此图外面由8段相同的圆弧构成；2、使用环形阵列命令快速绘制。

3.0 分 99 页 | 3.23 MB | 2020-02-22 14:08
绘制沙发、茶几图形

实例141绘制沙发、茶几图形沙发和茶几是客厅中的常用家具，它们都需要根据卧室的结构合理摆放，才能给人们带来舒适感。本例通过绘制图12-63所示的双人沙发和茶几图形，主要对“矩形”、“圆角”、“偏移”等命令进行综合练习和巩固。图12-63实例效果（1）执行“新建”命令，通过使用样板文件acadiso.dwt新建一个空白工作文档。

4.9 分 7 页 | 450.00 KB | 2022-08-10 23:51
支撑轴平面图

得到如图所示的结果。2.为了方便作图，移动坐标系，在命令行中输入ucs后按问车键，指定UCS远点（37,0）。3．绘制圆。选择“绘图”“圆”命令，或者单击“绘图”工具栏中的“圆”按钮，或者在命令行输入cirle后按回车键，绘制圆心为（0,0）半径为5的圆，得到如图所示结果。 4.重复上述命令，选择“绘图”“圆”命令，或者单击“绘图”工具栏中的“圆按钮，或者在命令行输入circle后按回车键，绘制圆心为（0,0），半径为10的圆。得到如图所示结果。

4.8 分 5 页 | 61.58 KB | 2021-10-09 01:47
CAD练习图(精华)

图1-3利用目标捕捉功能绘制图形..【习题1-4】打开极轴追踪模式(FIO)，通过输入直线的长度绘制图1-4所示的图形。图1-6综合练习2..2、实体绘图命令练习【习题1-7】利用Circle(圆)和Ellipse(椭圆)等命令绘制图1-7所示的图形。图1-7绘制圆和椭圆【习题1-8】利用Polygon(正多边形)和Circle(圆)等命令绘制图1-8所示的图形。

3.0 分 21 页 | 3.77 MB | 2019-09-14 05:13
项目13-创意茶杯的绘制

项目十三创意茶杯的绘制项目名称创意茶杯的制作理论目标形状工具调整曲线的方法贝塞尔工具绘图基本步骤●操作目标●好的曲线项目地位形状工具在图形绘制的重要功能项目教学过程阶段一：启发阶段（一）形状工具调整绘制效果图展示 2、使用我们的基本工具能绘制出来吗？【连接节点】按钮，再使用【形状工具】作调整，填充红色4、5、使用相同的方法，绘制如下：再使用【贝塞尔工具】绘制叶子，绘制好后，Shift+PageDown放置后一层，在绘制白色叶子部分，效果如下：6

4.7 分 5 页 | 346.22 KB | 2022-07-03 00:01
滚圆法制造球形

用挤出滚圆法制造球形微丸微粒的基本方法和设备潘家祯孙晓明朱大滨房爱东(华东理工大学化工机械研究所，上海，200237)提要由于球粒在造粒中有着优越的性能，开发用工业方法制备大小均一、圆球度好、表面光洁的球粒造粒方法有着巨大的应用前景医药工业缓释、控释制剂的发展更迫切需要开发大规模制造球粒的方法和设备。本文介绍了用挤出滚圆方法制造球形微丸微粒的方法和设备。最新开发、研制的专利产品——球形微丸造粒机能够以工业规模批量制造球粒微丸。 1用挤出滚圆法制造球粒的特点在医药、食品、化肥、精细化工等行业中，造粒是一种十分重要的工艺过程。

4.8 分 5 页 | 93.50 KB | 2022-09-08 23:44
ps教程：如何临摹一枚QQ浏览器图标

ps教程：如何临摹一枚QQ浏览器图标作者:一网学最后更新时间：2015-10-2410:33:57小编：今天带来临摹教程，如何绘制一枚QQ浏览器的logo，教程只要细心不难，新手们完成没有问题，主要练习的是同学们对钢笔工具的熟练度最终效果图：新建一个500*500画布，按U用椭圆工具画一个200*200的圆（颜色随意）路径选择工具选中画好的圆形。 ctrl+c，ctrl+v复制这个圆形在同一个图层ctrl+t缩小的时候按住shift+alt，同比例缩小（大小自己看着合适就行）如图所示。切掉它合并成一个形状。

4.7 分 18 页 | 1.26 MB | 2021-11-16 00:20