HTML5利用canvas绘制太极图案
代码如下:
pageEncoding="utf-8"%>
<!DOCTYPE HTML>
<html>
<body>
var cxt=c.getContext("2d");
//绘制左侧的白色半圆直径都是150
cxt.fillStyle="#FFFFFF";
cxt.beginPath();
cxt.arc(300,200,150,1.5*Math.PI,Math.PI/2,false);
cxt.closePath();
cxt.fill();
//绘制右侧的黑色半圆
cxt.fillStyle="#000000";
cxt.beginPath();
cxt.arc(300,200,150,Math.PI/2,1.5*Math.PI,false);
cxt.closePath();
cxt.fill();
//绘制下面的黑色圆
cxt.fillStyle="#000000";
cxt.beginPath();
cxt.arc(300,275,75,0,2*Math.PI,false);
cxt.closePath();
cxt.fill();
//绘制上面的白色圆
cxt.fillStyle="#FFFFFF";
cxt.beginPath();
cxt.arc(300,125,75,0,2*Math.PI,false);
cxt.closePath();
cxt.fill();
//绘制两个小圆
cxt.fillStyle="FFFFFF";
cxt.beginPath();
cxt.arc(300,275,10,0,2*Math.PI,false);
cxt.closePath();
cxt.fill();
//绘制黑色小圆
cxt.fillStyle="#000";
cxt.beginPath();
cxt.arc(300,125,10,0,2*Math.PI,false);
cxt.closePath();
cxt.fill();
</script>
</html>
HTML5利用canvas绘制太极图案相关推荐
- 如何用手机HTML制作哆啦a梦,HTML5利用canvas绘制哆啦A梦头部-电脑自学网
html5的canvas是很强大的,下面本篇文章使用html5 canvas 实现一个简单的哆啦A梦头部.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 效果如下: 代码如下: 您的 ...
- HTML5利用Canvas绘制图形(绘制渐变、模式、变换)
绘制渐变 渐变是一种很普遍的视觉形象,能带来视觉上的舒适感.在Canvas中,绘图API提供了两个原生的渐变方法,包括线性渐变和径向渐变.渐变,在颜色集上使用逐步抽样的算法,可以应用的描边样式和填充样 ...
- HTML5利用Canvas绘制图形(Canvas基本知识、绘制矩形、使用路径和图形组合)
绘制图形有很多方法,可以借助Flash实现,也可以使用SVG和VML来绘图.本次将要学习一种新的灰土方法--使用Canvas元素,它是基于HTML5原生的绘图功能.使用Canvas元素,可以绘制图形, ...
- 如何在html5中实现多圆,JavaScript与html5如何实现canvas绘制圆形图案的方法介绍
这篇文章主要介绍了js+html5实现canvas绘制圆形图案的方法,涉及html5图形绘制的基础技巧,需要的朋友可以参考下 本文实例讲述了js+html5实现canvas绘制圆形图案的方法.分享给大 ...
- html5 canvas 椭圆,html5中怎么利用Canvas绘制椭圆
html5中怎么利用Canvas绘制椭圆 发布时间:2021-07-08 16:32:10 来源:亿速云 阅读:58 作者:Leah html5中怎么利用Canvas绘制椭圆,针对这个问题,这篇文章详 ...
- 小程序利用canvas 绘制图案 (生成海报, 生成有特色的头像)
小程序利用canvas 绘制图案 (生成海报, 生成有特色的头像) 微信小程序生成特色头像,海报等是比较常见的.下面我来介绍下实现该类小程序的过程. 首先选择前端来通过 canvas 绘制.这样比较节 ...
- html5绘制图形幸运大转盘,微信小程序利用canvas 绘制幸运大转盘功能
小程序对 canvas api 跟h5的不太一致 ,所以这个搞的比较久,不多说,先贴代码 Page({ /** * 页面的初始数据 */ data: { awardsConfig: {}, resta ...
- 在html利用canvas蚂蚁,html5 利用canvas实现简单的人物走动
最近在学习html5,其中涉及到很关键的元素canvas-画布,在网上下载了一些游戏源代码,虽然能看懂,但是想单独地针对某个功能提取出来还是有难处的,于是乎自己又上网查找了一些例子,才将超级玛丽简单的 ...
- 解决Html5用canvas绘制不出来图片的问题
转载自 解决Html5用canvas绘制不出来图片的问题 如果使用html5的ctx.drawImage(img,0,0);绘制不出来, 就改为: img.onload = function(){ ...
- html5 自动扣图,html5利用canvas实现颜色容差抠图功能
利用canvas的getImageData,我们可以获取到一张图片每一个像素的信息,而通过对每一个像素信息的对比,我们就可以找到需要消去的像素点.比如下面这一张图片,如果我们想要扣去白色部分(粉色是b ...
最新文章
- linux 执行程序 注销,Linux登录登出的过程 | Soo Smart!
- 程序的编译、链接和执行
- 数据库基础笔记(MySQL)2 —— 基础查询
- 通信网络设计(最小生成树+图的联通)
- 为RHEL5安装JDK和配置tomcat
- mfc将文件内容引入编辑框_南开大学黄津辉教授团队联合加拿大麦克马斯特大学Ravi教授团队发表微型MFC水质传感器实际废水检测适用性的研究...
- 【基环树DP】[NOI2012]迷失游乐园
- 【SLAM】gradslam(∇SLAM)开源:论文、代码全都有
- Spring Cloud 各组件调优参数
- Inno Setup入门(十八)——Inno Setup类参考(4)
- 用html5做一条线,使用HTML5 canvas绘制线条的方法
- SQL(八)- python执行SQL语句
- 互联网发展的四个阶段
- 波士顿动力Spot mini,MIT 猎豹、宇树科技、蔚蓝四足机器人类别
- 汽车营销与保险【3】
- 微信小程序解析并上传excel
- MathType中的四则运算符号该怎样进行输入
- 代码随想录Day01 | LeetCode704.二分查找、LeetCode27.移除元素
- 你只要上传两张毫无关联的照片「这个网站就会自动帮你合成了!」
- 海思PQTool进行CCM调试经验