html5 canvas 画阿迪达斯logo,HTML5 Canvas笔记—

HTML5 Canvas绘图绘制太极图

太极图

* {

padding: 0;

margin: 0;

}

body {

}

#myCanvas {

background-color: #eee;

}

// 获取到画布元素

let myCanvas = document.getElementById("myCanvas");

// 通过画布元素获取到上下文(画笔)

let ctx = myCanvas.getContext("2d");

// 右边白色的半圆

ctx.fillStyle = "#fff";

ctx.beginPath();

ctx.arc(300, 300, 100, (Math.PI / 180) * 270, (Math.PI / 180) * 90);

ctx.fill();

// 左边黑色的圆

ctx.fillStyle = "#000";

ctx.beginPath();

ctx.arc(300, 300, 100, (Math.PI / 180) * 270, (Math.PI / 180) * 90, true);

ctx.fill();

// 左边白色的小圆

ctx.fillStyle = "#fff";

ctx.beginPath();

ctx.arc(300, 250, 50, (Math.PI / 180) * 270, (Math.PI / 180) * 90, true);

ctx.fill();

// 右边黑色的小圆

ctx.fillStyle = "#000";

ctx.beginPath();

ctx.arc(300, 350, 50, (Math.PI / 180) * 270, (Math.PI / 180) * 90);

ctx.fill();

// 黑色的小圆点

ctx.fillStyle = "#000";

ctx.beginPath();

ctx.arc(300, 250, 5, 0, Math.PI * 2);

ctx.fill();

// 白色的小圆点

ctx.fillStyle = "#fff";

ctx.beginPath();

ctx.arc(300, 350, 5, 0, Math.PI * 2);

ctx.fill();

效果如图：

html5 canvas 画阿迪达斯logo,HTML5 Canvas笔记——HTML5 Canvas绘图绘制太极图相关推荐

html5 canvas 画阿迪达斯logo,用CSS3实现的addidas阿迪达斯标志LOGO特效代码
用CSS3实现的addidas阿迪达斯标志LOGO特效 demo by js.alixixi.com #adidas .canvas { background: #017ac3; } #adidas ...
html5 canvas 画阿迪达斯logo,canvas绘图画出了的美团LOGO
接下来是用HTML新标签canvas绘图画出了的美团LOGO. canvas练习 var canvas=document.getElementById('myfirstcanvas'); canvas ...
python canvas画弧度_只要十分钟，python绘图神器turtle了解一下？
python的强大在于它有许多的强大的库,turtle就是其中之一. 利用turtle,你可以进行交互式的绘画,作为一个艺术白痴,想要画一幅画可能很困难,但是利用python的turtle库,只需要几 ...
python canvas画弧度_编程作战丨如何利用python绘制可爱皮卡丘？
好莱坞真人电影<精灵宝可梦:大侦探皮卡丘>预告片已经发布了,正片将于今年5月10日上映. 如果要做一个「童年梦想排行榜」的话,相信「拥有一只皮卡丘」这个梦想一定会名列前茅! 毕竟,谁不想揉 ...
html5画直线箭头,HTML5 canvas画带箭头的虚线
今天给大家讲解的是在HTML5 canvas画带箭头的虚线.关于Canvas 对象表示一个 HTML 画布元素 -.它没有自己的行为,但是定义了一个 API 支持脚本化客户端绘图操作. 本案例注意事项 ...
使用canvas画同心圆，并且设置颜色渐变
使用canvas进行画圆,并且设置圆环颜色渐变:中间的实心圆渐变.在使用的过程中,其实是发现createLinearGradient(x0,y0,x1,y1)方法时,根据改变x0,y0,x1,y1可以 ...
HTML5 Canvas 画虚线组件
前段时间由于项目需要,用到了HTML5 Canvas画图,但是没有画虚线的方法,自己写了一个HTML5 画虚线的组件. dashedLine.js 1 if (window.CanvasRenderi ...
html5垂直线怎么画,HTML5 Canvas画线技巧
正统的HTML5 Canvas中如下代码复制代码代码如下: ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(3 ...
毛边效果 html,Html5中Canvas画线有毛边如何解决
Html5 Canvas 所有的画线指令画出来的线条都有毛边(比如 lineTo, arcTo,strokeRect),这是因为在Canvas中整数坐标值对应的位置恰巧是屏幕象素点中间的夹缝,那么当按 ...

html5 canvas 画阿迪达斯logo,HTML5 Canvas笔记——HTML5 Canvas绘图绘制太极图

html5 canvas 画阿迪达斯logo,HTML5 Canvas笔记——HTML5 Canvas绘图绘制太极图相关推荐

最新文章

热门文章