如何利用canvas画一个圆,并且填充颜色
如何利用canvas画一个圆,并且填充颜色(小白专用,大佬勿看)
canvas基础
相信在此之前,你对canvas已经有一定的了解了,接下来我将介绍,如何利用canvas画一个圆。
1、新建一个html模板,我用的编辑环境是Visual Studio Code:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>用canvas画一个圆</title>
</head>
<body></body><script type="text/javascript">
</script>
</html>
2、在body里面创建一个canvas标签,也就是设置一块画布:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>用canvas画一个圆</title>
</head>
<body><canvas id="canvas_1" width="1000" height="500" style="box-shadow: 0px 0px 20px black;">当前浏览器不支持 canvas</canvas>
<!--如果当前浏览器不支持canvas则会输出提示信息: 当前浏览器不支持canvas-->
</body><script></script>
</html>
3、再编辑js:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>用canvas画一个圆</title>
</head>
<body><canvas id="canvas_1" width="1000" height="500" style="box-shadow: 0px 0px 20px black;">当前浏览器不支持 canvas</canvas>
<!--如果当前浏览器不支持canvas则会输出提示信息: 当前浏览器不支持canvas-->
</body><script>
//1.获取 canvas 元素对应的 DOM 对象
var c=document.getElementById("canvas_1");//2.获取在 canvas 上绘图的 canvasRenderingContent2D 对象。这两行是必不可少的哦
var ctx=c.getContext("2d");//3.绘制
ctx.beginPath();//开始绘制
ctx.arc(95,50,40,0,2*Math.PI);//arc 的意思是“弧”
ctx.strokeStyle="blue";//将线条颜色设置为蓝色
ctx.stroke();//stroke() 方法默认颜色是黑色(如果没有上面一行,则会是黑色)。
</script>
</html>
3、效果图:
4-1、填充一个颜色,加上:
//3.绘制
ctx.beginPath();//开始绘制
ctx.arc(95,50,40,0,2*Math.PI);//arc 的意思是“弧”
ctx.fillStyle="#ff0";//设置填充颜色
ctx.fill();//开始填充
ctx.strokeStyle="blue";//将线条颜色设置为蓝色
ctx.stroke();//stroke() 方法默认颜色是黑色(如果没有上面一行,则会是黑色)。
4-2.填充颜色后的效果:
5、难点讲解,相信小白看了之后,对ctx.arc(100,100,80,0,2*Math.PI);这里有点不解。可以看W3school的介绍一看就懂
如何利用canvas画一个圆,并且填充颜色相关推荐
- 【css】使用 canvas 画一个圆、贝塞尔曲线画对话气泡
画一个圆 HTML <canvas id="canvas"></canvas> JavaScript var canvas = document.getEl ...
- 利用canvas画一个万花筒血轮眼的钟表
效果图: 完整代码如下: Document <script>const cvs = document.getElementById("cvs");const huabi ...
- android canvas空心圆,用canvas画实心圆和空心圆的方法
用canvas画实心圆和空心圆的方法 发布时间:2020-09-14 10:19:25 来源:亿速云 阅读:260 作者:小新 这篇文章给大家分享的是有关用canvas画实心圆和空心圆的方法的内容.小 ...
- 用canvas画一个五星红旗
利用canvas画一个好看的五星红旗!!! 简单,容易上手! <!DOCTYPE html> <html lang="utf-8"> <meta ht ...
- php绘制空心圆,HTML_html5使用canvas画空心圆与实心圆,这里给大家分享的是一个学习c - phpStudy...
html5使用canvas画空心圆与实心圆 这里给大家分享的是一个学习canvas的时候做的画空心圆与实心圆的练习题,非常简单. 复制代码代码如下: var canvas=document.getEl ...
- [html] 请使用canvas画一个渐变的长方形
[html] 请使用canvas画一个渐变的长方形 // 普通canvas绘图工具类// umd适配多种引入方式 (function(root, factory) {if (typeof define ...
- 用canvas画一个太极图(八卦图)
用canvas画一个太极图(八卦图) 源码展示链接: https://yanhappiness.github.io/Notes/canvas_src.html 理解什么是canvas canvas是H ...
- java实心圆_html5使用canvas画空心圆与实心圆
摘要:这篇HTML5栏目下的"html5使用canvas画空心圆与实心圆",介绍的技术点是"canvas.Html5.空心.使用.与",希望对大家开发技术学习和 ...
- html5中怎么使用canvas画空心圆与实心圆
这篇文章主要介绍"html5中怎么使用canvas画空心圆与实心圆"的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇"html5中怎么 ...
最新文章
- 赠书 | 元宇宙:开启未来世界的六大趋势
- mysql空表不导出问题_解决Oracle 11g空表无法导出的问题
- 超松弛迭代法求方法组的解(Python实现)
- linux7配置网卡绑定,CentOS7双网卡绑定配置
- devops工程师_DevOps工程师的认证
- LWP 轻量级线程的意义与实现
- 用windbg分析minidump
- 记录一次es写入操作
- 高性能 TCP UDP 通信框架 HP-Socket v3.3.1
- 安徽安全员B考试最新多选题库(2)
- 番茄时间法--2018年1月26号
- 主成分分析法原理与MATLAB实现
- ipad上能够编辑python_10 个可以在平板电脑上使用的 Python 编辑器
- Linux pthread详解
- echarts 地图上如何打点
- Django相关操作(连续跳转和登录注册为例)
- Excel 2007 宝典 (中文版高清PDF下载)
- c语言单元测试(cunit)打桩,如何写打桩文件
- 傅里叶变换与不确定性
- 阿里云部署项目详细步骤
热门文章
- 2020年十个强大的数据建模工具
- 使用Python来做物联网,就是这么简单!
- 浏览器去广告(Adblock Plus离线安装)
- 手机端移动端的前端原生js裁剪图片上传
- SQL Server 数据库之常用命令
- SiamFC论文学习笔记
- 已解决AttributeError: ‘Document‘ object has no attribute ‘convertToPDF‘
- 【Linux】编译的四个步骤
- SQL 2012 安装失败解决方案
- PEGAXY首创科幻类赛马游戏