js使用canvas画布画太极图案

代码如下：

  <body><canvas id="mycanvas"></canvas><script type="text/javascript">var c=document.getElementById('mycanvas');c.width=600;c.height=600;c.style.border="1px solid black";var context=c.getContext('2d');context.strokeStyle="black";context.lineWidth=4;context.fillStyle="black";context.beginPath();context.arc(300,300,250,0,Math.PI,true);context.stroke();context.fill();context.closePath();context.strokeStyle="black";context.lineWidth=3;context.fillStyle="white";context.beginPath();context.arc(300,300,250,0,Math.PI,false);context.stroke();context.fill();context.closePath()context.strokeStyle="white";context.lineWidth=1;context.fillStyle="white";context.beginPath();context.arc(175,300,125,0,2*Math.PI);context.stroke();context.fill();context.closePath()context.strokeStyle="black";context.lineWidth=1;context.fillStyle="black";context.beginPath();context.arc(425,300,125,0,2*Math.PI);context.stroke();context.fill();context.closePath()context.strokeStyle="black";context.lineWidth=1;context.fillStyle="black";context.beginPath();context.arc(175,300,30,0,2*Math.PI);context.stroke();context.fill();context.closePath()context.strokeStyle="white";context.lineWidth=1;context.fillStyle="white";context.beginPath();context.arc(425,300,30,0,2*Math.PI);context.stroke();context.fill();context.closePath()</script></body>

js使用canvas画布画太极图案相关推荐

Chart.js清空canvas画布 clearRect()等canvas方法擦除失败（附完整代码）
Chart.js清空canvas画布 clearRect等canvas方法擦除失败一.直接移除DOM对象方式原因方法二.完整代码 html javascript chart.js画图方法三. ...
html5 canvas图表,Chart.js基于Canvas画布的HTML5统计图表库 - 资源分享
Chart.js 是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库.可以绘制柱状图.热点图.曲线图等,使用HTML5中的Canvas画布,支持原生的和jQuery的调用方法. 特点 6种图表 ...
HTML5 Canvas组件绘制太极图案
一实现思路: 实现原理主要是利用HTML5的Canvas组件提供的path函数功能来绘制圆,首先绘制两个半圆,分别为黑色和白色,组成一个圆,绘制完成以后再分别绘制一个黑色和白色的圆在绘制好的黑白圆 ...
原生js实现canvas画布中绘制、移动、拖拽、删除矩形（如简易截图工具）
功能描述待图片上传并加载完成后,重新生成画布: 鼠标在画布区域内绘制,移动,拖拽,删除矩形(如截图工具一般): isboundary() 判断是否需要判断边界问题,默认false. 效果截图实现代 ...
JS关于canvas画布小笔记
JS画布笔记 1. 实现画布 var canvas = document.getElementById("mycanvas"); var ctx = canvas.getConte ...
用canvas画布画时钟
canvas canvas简介 HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形 ...
canvas 画布画太极图和钟表
摘要:html5的canvas元素称得上是html5的核心技术,而作为一个依靠js绘制华丽图像的元素,Canvas究竟能够运用在哪些方面的开发? 相关代码什么是Canvas? Canvas元素是h5 ...
利用canvas画布画哆啦A梦
简易版哆啦A梦源代码: <!DOCTYPE html> <html><head><title>哆啦A梦</title><meta ch ...
原生JS的canvas标签画时钟
首先要申明本人对于美除了美女真没什么要求. 其次讲讲次学习碰到重要知识点: 1.画圆(弧): context.arc(x, y, radius, Math.PI / 180 * startAngle, ...
html画布动漫人物,canvas画布画卡通人物--哆啦A梦
#canvas1 {background-color: #5F9EA0;} var can = document.getElementById("canvas1"); var pe ...

js使用canvas画布画太极图案

js使用canvas画布画太极图案相关推荐

最新文章

热门文章