HTML5 Canvas组件绘制太极图案
一实现思路:
实现原理主要是利用HTML5的Canvas组件提供的path函数功能来绘制圆,首先绘
制两个半圆,分别为黑色和白色,组成一个圆,绘制完成以后再分别绘制一个黑色
和白色的圆在绘制好的黑白圆之内,半径恰好是黑白大圆一半。 最后在绘制好的两
个黑白小圆内分别填充白色和黑色的点,半径大小为10pixel左右。
二程序效果如下:
三关键程序解析:
绘制半圆的程序,其中200,200表示开始绘制圆心点坐标,第三个参数150表示绘制圆的半径
第四个参数表示开始角度,第五个参数表示结束角度,最后一个参数表示是否为顺时针或者逆时针
绘制白色半圆的代码如下:
ctx.fillStyle="#fff";ctx.beginPath(); ctx.arc(200, 200, 150, 1.5*Math.PI, Math.PI/2, false);ctx.closePath();ctx.fill();
绘制黑色半圆的代码如下:
ctx.fillStyle="#000";ctx.beginPath(); ctx.arc(200, 200, 150, Math.PI/2, 1.5*Math.PI, false);ctx.closePath();ctx.fill();
在太极图案中添加文字的代码使用了透明处理,Canvas全局透明度设置函数
如下:
// set transparency value ctx.globalAlpha = 0.2;
绘制文字的代码如下:
// Draw semi transparent textctx.fillStyle = "#f00";ctx.font = "32pt Arial";ctx.fillText("Hello", 220, 200);ctx.fillText("Canvas", 100, 250);
程序完全JavaScript代码如下:
window.onload = function() {var cvs = document.getElementById("canvas-path");ctx = cvs.getContext("2d");// Create circle, radius = 150// start point(x, y), radius, start angle, end angle, boolean antiClockWisectx.fillStyle="#fff";ctx.beginPath(); ctx.arc(200, 200, 150, 1.5*Math.PI, Math.PI/2, false);ctx.closePath();ctx.fill();ctx.fillStyle="#000";ctx.beginPath(); ctx.arc(200, 200, 150, Math.PI/2, 1.5*Math.PI, false);ctx.closePath();ctx.fill();// draw sub circle// start point(x, y), radius, start angle, end angle, boolean antiClockWisectx.fillStyle="#000";ctx.beginPath(); ctx.arc(200, 275, 75, 0, Math.PI*2, false); ctx.closePath();ctx.fill();ctx.fillStyle="#fff";ctx.beginPath(); ctx.arc(200, 125, 75, 0, Math.PI*2, false);ctx.closePath();ctx.fill();// fill black and white pointctx.fillStyle="#fff";ctx.beginPath(); ctx.arc(200, 275, 10, 0, Math.PI*2, false);ctx.closePath();ctx.fill();ctx.fillStyle="#000";ctx.beginPath(); ctx.arc(200, 125, 10, 0, Math.PI*2, false);ctx.closePath();ctx.fill();// set transparency value ctx.globalAlpha = 0.2; // Draw semi transparent textctx.fillStyle = "#f00";ctx.font = "32pt Arial";ctx.fillText("Hello", 220, 200);ctx.fillText("Canvas", 100, 250);ctx.globalAlpha = 1.0; ctx.shadowOffsetX = 2; ctx.shadowOffsetY = 2; ctx.shadowBlur = 2; ctx.shadowColor = "rgba(0, 0, 0, 0.5)"; ctx.fillStyle = "#000";ctx.font = "20px Times New Roman";ctx.fillText("-created by gloomyfish", 100, 30);};
我为什么要在插图上加上我的名字,因为发现文章被转载的时候居然没有被标出来!
HTML5 Canvas组件绘制太极图案相关推荐
- HTML1个像素宽的代码,HTML5 Canvas中绘制一个像素宽的细线实现代码详情
正统的HTML5 Canvas中如下代码ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(300,100); ct ...
- html5canvas绘制图片源码,HTML5 CANVAS:绘制图片
HTML5 CANVAS:绘制图片 通过前面的学习,我们现在已经可以在HTML5 canvas中绘制图形和文字,并给它们设置一些样式.我们还可以在中绘制图片.用于在作为绘制源的图片可以是下面的几种元素 ...
- html坐标绘制路径,HTML5 CANVAS:绘制路径
一条HTML5 canvas路径是通过绘制指令来连接一系列的点,由这一系列的点构成直线或曲线.路径可以用于在HTML5 canvas上绘制各种类型的图形:直线.圆形.多边形等等.路径的绘制是canva ...
- 前端html生成图片,HTML5 Canvas:绘制图片
通过前面的学习,我们现在已经可以在HTML5 canvas中绘制图形和文字,并给它们设置一些样式.我们还可以在中绘制图片.用于在作为绘制源的图片可以是下面的几种元素类型: HTMLImageEleme ...
- html5 canvas 画阿迪达斯logo,HTML5 Canvas笔记——HTML5 Canvas绘图绘制太极图
HTML5 Canvas绘图绘制太极图 太极图 * { padding: 0; margin: 0; } body { } #myCanvas { background-color: #eee; } ...
- html绘制动态小人,JavaScript和html5 canvas如何绘制一个小人的代码
这篇文章主要介绍了JavaScript+html5 canvas绘制的小人效果,涉及JavaScript结合html5 canvas图形绘制及颜色随机填充的技巧,需要的朋友可以参考下 本文实例讲述了J ...
- HTML5 学习手笔二:canvas API 绘制树形图案A
上篇通过对canvas 画对角线,了解了一些canvas画图基本原理.现在可以利用HTML5 canvas API创建一个场景:带有长跑跑道的树林. 本篇大纲 用canvas API绘制树木的树冠 为 ...
- 用html画一个企鹅图案的代码,HTML5 Canvas来绘制图形
1.HTML5元素用于图形的绘制,通过脚本(通常是javascript)来完成. 2.标签只是图形容器,必须使用脚本来绘制图形. 3.可以通过多种方法通过Canvas绘制路径.盒.圆.字符以及添加图像 ...
- 【绘制】HTML5 Canvas 中渐变色和图案(图文、示例)
我的处女作<Canvas系列教程>在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作. 教程介绍.教程目录等能在README里查阅. 传送门:https: ...
最新文章
- 再谈CVE-2017-7047 Triple_Fetch和iOS 10.3.2沙盒逃逸
- 位运算02 - 零基础入门学习C语言65(完)
- SAP CRM category search的实现
- mysql批量插入数据的函数和存储过程
- 列表,字典表达式以及三元表达式
- android蓝牙串口通讯
- SVN: repository browser 库浏览器
- Atitit.月度计划日程表 每月流程表v5
- RC低通滤波器——CR高通滤波器---的使用
- html请求资源不可用,HTTP状态404 – 请求的资源(/)不可用
- 什么是平衡二叉树和平衡二叉树的高度达到O(log2n)最少需要结点数为n
- Julia开发工具Atom+Juno的安装与使用
- 检测网络是否稳定的计算机命令,电脑中常用的网络检测命令|电脑中检测网络是否存在故障的几条命令...
- h5网页服务器,h5网页游戏服务器搭建
- linux挂载1t硬盘,linux如何挂载硬盘linux服务器上挂载磁盘(图文)
- 秘密共享方案介绍SS
- 网络中AP和AC的意思
- SCAU8583、SCAU8585、SCAU8586、SCAU8587、SCAU8588、SCAU18938 栈的基本操作
- 【学习笔记】MyBatis中接口中方法传递多个参数问题展示与解决
- 农村大学生的逆袭009
热门文章
- 让电代替人工去计算——机电时期的权宜之计
- ORCAL计算司龄是否满一年
- 南通java行业,南通java技术培训中心
- Unhandled JS Exception: Unexpected identifier ‘_classCallCheck‘. import call expects exactly one arg
- Mac Electron App 签名后打开闪退
- Dva.js 入门级教学文档-1
- 20220904小红书笔试
- 【前端html页面数据导出为pdf文件】
- 湖南大学计算机学院陈浩,杨圣洪-湖大信息科学与工程学院
- 谭浩强C++ 第一章(第三版)