canvas元素绘制太极图
<!DOCTYPE html>
<html>
<head>
<title>canvas example</title>
<meta charset="utf-8">
</head>
<body>
<canvas id="canvas" width="600px" height="600px"></canvas> <script>
var canvas=document.getElementById("canvas");
var context=canvas.getContext('2d');
context.beginPath();
context.arc(300,300,200,0,2*Math.PI,false);
context.stroke();
context.beginPath();
context.fillStyle="black";
context.arc(300,300,200,Math.PI/2,Math.PI*3/2,false);
context.fill();
context.beginPath();
context.fillStyle="white";
context.arc(300,200,100,0,Math.PI*2,false);
context.fill();
context.beginPath();
context.fillStyle="black";
context.arc(300,400,100,0,Math.PI*2,false);
context.fill();
context.beginPath();
context.fillStyle="black";
context.arc(300,200,30,0,Math.PI*2,false);
context.fill();
context.beginPath();
context.fillStyle="white";
context.arc(300,400,30,0,Math.PI*2,false);
context.fill();
</script>
</body>
</html> 效果图如下:
canvas元素绘制太极图的更多相关文章
- canvas元素
一.canvas元素的基础知识 canvas元素是html5中新增的一个重要的元素,专门用来绘制图形.在页面上放置了一个canvas元素,就相当于在页面上放置了一块"画布",可以在 ...
- 使用canvas元素-art方法绘制圆弧
最近在学习HTML5,发现canvas真的很棒,canvas元素是一种可供绘图的平面,我们用JavaScript对它进行配置和操作.我这里说一下arc方法绘制圆弧,顺便提一下涉及到的基础知识. 首先看 ...
- -_-#【Canvas】导出在<canvas>元素上绘制的图像
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- HTML5图形绘制学习(1)-- Canvas 元素简介
Canvas元素是HTML5中新增的一个专门用来进行图形绘制的元素.和其名称Canvas一样,它就相当于一个画布,我们可以在其上描绘各种图形. 这里所说的绘制图型,不是指我们可以进行可视化的图形绘制, ...
- HTML5<canvas>标签:使用canvas元素在网页上绘制线条和圆(1)
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
- canvas一周一练 -- canvas绘制太极图(6)
运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...
- 【高级功能】使用canvas元素(第一部分)
1. 开始使用 canvas 元素 canvas 元素非常简单,这是指它所有的功能都体现在一个JavaScript对象上,因此该元素本身只有两个属性:width 和 height. canvas 元素 ...
- HTML5 画布canvas元素
HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小 ...
- 【温故而知新-Javascript】使用canvas元素(第二部分)
本文将继续介绍canvas的功能,展示如何绘制更复杂的图形(包括圆弧和曲线),如何使用剪裁区域来限制操作以及如何绘制文本.还是介绍可以应用在画布上的特效和变换,包括阴影.透明度.旋转和坐标重映射. 1 ...
随机推荐
- Vue-ui常用组件库整理
Vue-ui常用组件库整理 查看全部整理内容==> element-ui Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库. 这款是我用了很久的, ...
- 微信小程序连接本地接口(转)
原文地址 最近的一个项目就是微信小程序 第一次接触微信开发者工具,并进行小程序的后端开发, 于是想看一下小程序如何请求本地的后台服务接口 wx.request({ url: 'http://local ...
- 微信小程序开发踩坑日记
2017.12.29 踩坑记录 引用图片名称不要使用中文,尽量使用中文命名,IDE中图片显示无异样,手机上图片可能出现不显示的情况. 2018.1.5 踩坑记录 微信小程序设置元素满屏,横向直接w ...
- Java中同步的几种实现方式
1.使用synchronized关键字修饰类或者代码块: 2.使用Volatile关键字修饰变量: 3.在类中加入重入锁. 代码示例: 非同步状态下: public static void main( ...
- Angularjs中的Controller
概念:一个应用(APP,本身也是一个大模块)是由若干个模块(module)组成的,每个模块实现一个功能.利于代码的复用. 书写格式: <!DOCTYPE html> <html ng ...
- LeetCode 5. Longest Palindromic Substring & 回文字符串
Longest Palindromic Substring 回文这种简单的问题,在C里面印象很深啊.希望能一次过. 写的时候才想到有两种情况: 454(奇数位) 4554(偶数位) 第1次提交 cla ...
- mysql如何修改root用户的密码
方法1: 用SET PASSWORD命令 首先登录MySQL. 格式:mysql> set password for 用户名@localhost = password('新密码'); 例子:my ...
- github中SSH公钥的生成与添加
在终端中输入ssh-keygen -t rsa -C "133XXXXXX@qq.com" 按3个回车,密码为空这里一般不使用密钥. 最后得到了两个文件:id_rsa和id_rsa ...
- python3下全自动快速度在线安装所有插件
把下面的内容复制存为pip.conf文件, [global]timeout = 60index-url = https://pypi.python.org/simple/no-cache-dir = ...
- CoordinateLayout简介
CoordinateLayout简介 参考:CoordinatorLayout CoordinatorLayout is a super-powered FrameLayout. Coordinato ...