canvas画奥运五环 2019/10/29

在HbuilderX中用canvas画一个奥运五环。
先用arc画出五个圆环，画布是后画的图形在顶层，再根据圆环相互串压的顺序，新添同心圆笔画，就能画出五环相互勾连的样子了。
基本完成任务，效果简陋，可能有些地方可以更精简。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>绘制一个五环</title></head><body><canvas id="myCanvas" width="650px" height="350px" style="border: 1px solid #d3d3d3;">您的浏览器不支持HTML5 canvas 标签</canvas><script>var c = document.getElementById("myCanvas");//选择画布var ctx = c.getContext("2d");ctx.lineWidth = 5ctx.arc(80,80,50,0,2*Math.PI);ctx.strokeStyle="blue"ctx.stroke();ctx.beginPath();ctx.arc(190,80,50,0,2*Math.PI);ctx.strokeStyle="black"ctx.stroke();ctx.beginPath();ctx.arc(300,80,50,0,2*Math.PI);ctx.strokeStyle="red"ctx.stroke();ctx.beginPath();ctx.arc(135,140,50,0,2*Math.PI);ctx.strokeStyle="yellow"ctx.stroke();ctx.beginPath();ctx.arc(245,140,50,0,2*Math.PI);ctx.strokeStyle="green"ctx.stroke();ctx.beginPath();ctx.arc(80,80,50,0.8*Math.PI,0.5*Math.PI);ctx.strokeStyle="blue"ctx.stroke();ctx.beginPath();ctx.arc(135,140,50,1*Math.PI,1.3*Math.PI)ctx.strokeStyle="yellow";ctx.stroke();ctx.beginPath();ctx.arc(190,80,50,0.5*Math.PI,0.8*Math.PI)ctx.strokeStyle="black";ctx.stroke();ctx.beginPath();ctx.arc(190,80,50,0,0.3*Math.PI)ctx.strokeStyle="black";ctx.stroke();ctx.beginPath();ctx.arc(300,80,50,0.5*Math.PI,0.8*Math.PI)ctx.strokeStyle="red";ctx.stroke()</script></body>
</html>

canvas画奥运五环 2019/10/29相关推荐

canvas画奥运五环
效果如下: 代码如下: <!DOCTYPE html> <html> <head><title>奥运五环</title><meta c ...
04_turtle画奥运五环
4.turtle画奥运五环 # 绘制奥运五环 import turtleturtle.width(10)#画笔宽度turtle.color("blue")# 颜色蓝色 turtle ...
python秒画奥运五环
龟叔大法 python一秒画奥运五环 import turtle as tldef drawCircle(orgin,destination,color,radius):tl.width(6)tl.s ...
python画画需要什么模块_python实战练手项目---使用turtle模块画奥运五环
python实战练手项目---使用turtle模块画奥运五环 2020年将举办东京奥运会,本篇实践文章将带你使用turtle模块画一个五环图,先来看效果图 1. 定义一个类继承Turtle class ...
使用turtle来画奥运五环使用turtle进行图形化的程序设计来绘制自己想要的图形
使用turtle进行图形化的程序设计. showturtle()显示箭头 write()书写一段字符串在屏幕上 forward(px)向前运动,px是运动像素距离 backward(px)向后运动,p ...
如何用Python画奥运五环——circle（）
奥运五环主要运用了circle()来画图,每画一个圆圈,换一种颜色. 代码如下: import turtleturtle.speed(1) turtle.pencolor('blue') turtle ...
python学习之路（3）turtle画奥运五环
目录 turtle的相关函数五环的图片五环的原理图 turtle实现 turtle的相关函数 import turtle # 导入turtle模块 turtle.showturtle() #显示箭 ...
python画奥运五环代码_Python绘制奥运五环
绘制奥运五环主要涉及到Python中的turtle绘图库运用: turtle.forward(distance) 向当前画笔方向移动distance像素长度 turtle.backward(dista ...
android绘制五环图形,Android使用Canvas实现奥运五环
Canvas的drawXXX方法配合使用Paint可以实现圆点.圆.弧形和曲线等各种颜色的图形,本文将使用drawArc(@NonNull RectF oval, float startAngle, ...

canvas画奥运五环 2019/10/29

canvas画奥运五环 2019/10/29相关推荐

最新文章

热门文章