使用canvas和JavaScript画一个阴阳图

主要函数：

函数名	用法	说明
arc()	Canvas.arc(0,0,20,0,2*Math.PI,false);arc参数：坐标点，半径，起始角度，结束角度，逆时针（默认）。	画圆
stroke()	Canvas.stroke();	画边框

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body><canvas id="myCanvas" width="1000" height="1000">
</canvas><script type="text/javascript">var c = document.getElementById("myCanvas");var CanContenxt = c.getContext("2d");//绘制右边的黑线轮廓和白色半圆CanContenxt.fillStyle = "#FFFFFF";CanContenxt.beginPath();CanContenxt.arc(300, 200, 150, 0, 2 * Math.PI, false);CanContenxt.closePath();CanContenxt.stroke();//绘制左侧的黑色半圆CanContenxt.fillStyle = "#000000";CanContenxt.beginPath();CanContenxt.arc(300, 200, 150, Math.PI / 2, 1.5 * Math.PI, false);CanContenxt.closePath();CanContenxt.fill();//绘制上半部分的黑色小圆CanContenxt.fillStyle = "#000000";CanContenxt.beginPath();CanContenxt.arc(300, 125, 75, 0, 2 * Math.PI, false);CanContenxt.closePath();CanContenxt.fill();//绘制下半部分的白色小圆CanContenxt.fillStyle = "#FFFFFF";CanContenxt.beginPath();CanContenxt.arc(300, 275, 75, 0, 2 * Math.PI, false);CanContenxt.closePath();CanContenxt.fill();//绘制两个最小的小圆//绘制黑色小圆CanContenxt.fillStyle = "#000000";CanContenxt.beginPath();CanContenxt.arc(300, 275, 17, 0, 2 * Math.PI, false);CanContenxt.closePath();CanContenxt.fill();//绘制白色小圆CanContenxt.fillStyle = "#FFFFFF";CanContenxt.beginPath();CanContenxt.arc(300, 125, 17, 0, 2 * Math.PI, false);CanContenxt.closePath();CanContenxt.fill();</script>
</body></html>

使用canvas和JavaScript画一个阴阳图相关推荐

请问怎么用python画一个轮廓图，，例如中国地图这种，注意是轮廓图，求大佬指点
请问怎么用python画一个轮廓图,,例如中国地图这种,注意是轮廓图例如这个:
使用 auto-drawing 画一个鱼骨图
使用 auto-drawing 画一个鱼骨图 auto-drawing 官方文档基于 vue 环境安装 yarn add auto-drawing 代码 fishbone.vue <temp ...
html css绘制太极,css画太极阴阳图
前言:道生一,一生二,二生三,三生万物今天,我们来聊聊如何用 CSS 实现太极图? 在网上可以找到很多资料,不过我强推荐一个css酷炫效果的网站,我们要实现一个阴阳图,谷歌搜索关键词:css t ...
使用 auto-drawing 画一个户型图
使用 auto-drawing 画一个户型图 auto-drawing 官方文档基于 vue 环境安装 yarn add auto-drawing 代码 room.vue <template ...
圣诞快到了，用JavaScript画一个圣诞树
圣诞快到了,送给大家一棵圣诞树~ 实现效果实现过程 1.先来画一棵树开始的大致思路就是利用 canvas画布功能绘制圣诞树,自己先在草稿纸上画了一个简单的圣诞树,然后用画布功能尝试实现. 实 ...
如何用Apache POI操作Excel文件-----如何用Apache POI 画一个离散图
有的时候,我们需要Excel中的数据,通过一个图画,可视化的表现出来. 那么这个时候,应该如何做呢?现在就借花献佛,以Apache POI自己提供的一个例子为例,给大家演示一下POI的API 如何画图 ...
WPF动态在画布（Canvas）上画一个矩形。
应用背景,现在有一个用WPF定义好的画布, <Canvas Name="MapCanvas" Height="{Binding MapTrackCanvasHeig ...
使用css画太极,CSS画太极阴阳图
引言 CSS可以画很多图形,今天我们来画一个特殊的图形--中国古代哲学的"太极图". 如果没有用CSS画过简单图形,建议先学习如何用border属性画三角形. 构思步骤 1.在 ...
使用Canvas和JavaScript做一个画板
首先说一下要实现的功能: 切换画笔颜色调整笔刷粗细清空画布橡皮擦擦除撤销操作保存成图片兼容移动端(支持触摸) 好了,废话少说,先看最终效果:https://zhoushuozh.githu ...

使用canvas和JavaScript画一个阴阳图

使用canvas和JavaScript画一个阴阳图相关推荐

最新文章

热门文章