使用canvas绘制太极

太极图

今天学习canvas，哈哈哈，其实我还搞不清楚方向来者，不过太极倒是画出来了，记录一下，方便日后查询
理论：绘制圆形cxt.arc(x,y,r,起点弧度（3点位置），终止弧度，bool(默认是false:顺时针，true:逆时针))
cxt.arc(600,600,100,Math.PIx0.5，Math.PIx1.5),是右边半圆。
因为*号不显示出来，我就用x了

成图：

代码如下：

 <canvas id='canvas' height="800" width="800"></canvas>

 let canvas=document.getElementById('canvas');let cxt=canvas.getContext('2d');
//大圆部分cxt.beginPath();cxt.arc(200,200,100,0,Math.PI*2)cxt.closePath();cxt.fillStyle='black';cxt.fill();//半边白色的圆cxt.beginPath();cxt.arc(200,200,100,1.5,Math.PI*1.5,true)cxt.closePath();cxt.fillStyle='white';cxt.fill();//半边小白色的圆cxt.beginPath();cxt.arc(201,150,50,1.5,Math.PI*1.5,false)cxt.closePath();cxt.fillStyle='white';cxt.fill();//下半边黑色的圆cxt.beginPath();cxt.arc(200,250,50,1.5,Math.PI*1.5,true)cxt.closePath();cxt.fillStyle='black';cxt.fill();// 上半边白色的圆里面的黑色的圆cxt.beginPath();cxt.arc(200,150,25,0,Math.PI*2)cxt.closePath();cxt.fillStyle='black';cxt.fill();//下半边黑色圆里面的白色的圆cxt.beginPath();cxt.arc(200,250,25,0,Math.PI*2)cxt.closePath();cxt.fillStyle='white';cxt.fill();//------------------------------------------------------//这是下半边圆的代码，图片在下面cxt.beginPath();cxt.arc(600,600,100,0,Math.PI*1)cxt.closePath();cxt.fillStyle='black';cxt.fill();

下半边圆图片如下

使用canvas绘制太极相关推荐

canvas绘制的文字如何换行
<html><head><title>canvas绘制的文字如何换行</title><style type="text/css" ...
HTML5 canvas绘制雪花飘落
Canvas是HTML5新增的组件,它就像一块幕布,可以用JavaScript在上面绘制各种图表.动画等.没有Canvas的年代,绘图只能借助Flash插件实现,页面不得不用JavaScript和Fl ...
canvas绘制时钟
听了慕课网Sliav Zhou 的课程canvas绘制时钟,记录下来的代码,每句做了注解便于以后学习,原先每次边听别的课边敲码,错误百出,明明原封不动复制的代码,就会出错,还找不到原因,今天可能运气好 ...
canvas绘制圆形
canvas绘制圆形的思路: 1.创建路径 XXX.beginpath(); 2.创建圆形的路径: 3.关闭路径:XXX.closepath(); 路径不关闭也能绘制出图形 4.设定绘制样式. 创建圆 ...
java canvas 画图片_[Java教程][HTML5] Canvas绘制简单图片
[Java教程][HTML5] Canvas绘制简单图片 0 2016-05-13 13:00:04 获取Image对象,new出来定义Image对象的src属性,参数:图片路径定义Image对象 ...
html5 canvas绘制圆形进度实例
2019独角兽企业重金招聘Python工程师标准>>> html5 canvas绘制圆形进度实例 <canvas id="test" width=200 h ...
【Android 应用开发】Canvas 绘制文字 ( 文字尺寸测量 | 基线绘制 )
文章目录 I . 文字尺寸测量 II . 基线绘制 I . 文字尺寸测量 1 . 精准绘制需求 : Canvas 绘制文字时 , 有时需要精准的控制文字的绘制 , 如绘制到指定的区域 , 居中 , 或 ...
小猿圈html5教程之canvas绘制线段方法
HTML5现在是时下较火的编程语言之一,但是对于怎么学习很多朋友都是不了解的,不知道从何处下手,针对以上内容小猿圈web前端讲师每天会分享一个web前端知识,希望对你的前端学习有一定的帮助,今天分享的 ...
微信小程序canvas绘制环形图（含动画）
页面版效果图思路 1.使用一个canvas绘制(带动画): 2.通过画弧线,设置线宽,来实现圆环效果: 3.计算每段圆弧的起始角度和终止角度,用递归做动画: 绘制完第一段圆弧块–>再绘制下一 ...

使用canvas绘制太极

太极图

使用canvas绘制太极相关推荐

最新文章

热门文章