用canvas画阴阳鱼

代码如下：

<!DOCTYPE html>
<html>
<head><script>var drawing = function(){var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");//画个阴阳鱼ctx.beginPath();ctx.arc(100,100,90,-90*Math.PI/180,90*Math.PI/180,true);ctx.fillStyle = "black";ctx.fill();ctx.beginPath();ctx.arc(100,100,90,90*Math.PI/180,-90*Math.PI/180,true);ctx.stroke();ctx.beginPath();ctx.arc(100,55,44,-90*Math.PI/180,90*Math.PI/180,true);ctx.fillStyle = "white";ctx.fill();ctx.beginPath();ctx.arc(100,55,11,0,360*Math.PI/180,true);ctx.fillStyle = "black";ctx.fill();ctx.beginPath();ctx.arc(100,145,45,90*Math.PI/180,-90*Math.PI/180,true);ctx.fillStyle = "black";ctx.fill();ctx.beginPath();ctx.arc(100,145,11,0,360*Math.PI/180,true);ctx.fillStyle = "white";ctx.fill();}//要先加载对象才能调用window.onload = drawing;
</script>
</head>
<body><canvas id = "myCanvas" width="200" height="200" style = "border:1px dashed gray;"></canvas>
</body>
</html>

这里有很多重复的代码，可以封装一个函数来画圆。这个函数所需要参数有圆心坐标，半径，起始和结束的角度，填充还是不填充以及填充的颜色，更重要的是要有canvas对象，没有对象我们什么也干不了。

var drawingCircle = function(x,y,r,begin,end,yn,color,ctx){//yn为1画填充圆，为0画不填充圆，color为1颜色为黑，0颜色为白//还要把ctx对象传进来if(yn==1){ctx.beginPath();ctx.arc(x,y,r,begin,end,true);if(color==1)ctx.fillStyle = "black";elsectx.fillStyle = "white";ctx.fill();}else{ctx.beginPath();ctx.arc(x,y,r,begin,end,true);ctx.stroke();}
}

改动后的代码

<!DOCTYPE html>
<html>
<head><script>var drawingCircle = function(x,y,r,begin,end,yn,color,ctx){//yn为1画填充圆，为0画不填充圆，color为1颜色为黑，0颜色为白//还要把ctx对象传进来if(yn==1){ctx.beginPath();ctx.arc(x,y,r,begin,end,true);if(color==1)ctx.fillStyle = "black";elsectx.fillStyle = "white";ctx.fill();}else{ctx.beginPath();ctx.arc(x,y,r,begin,end,true);ctx.stroke();}}var drawing = function(){var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");//画个阴阳鱼        drawingCircle(100,100,90,-90*Math.PI/180,90*Math.PI/180,1,1,ctx);drawingCircle(100,100,90,90*Math.PI/180,-90*Math.PI/180,0,0,ctx);drawingCircle(100,55,44,-90*Math.PI/180,90*Math.PI/180,1,0,ctx);drawingCircle(100,55,11,0*Math.PI/180,360*Math.PI/180,1,1,ctx);drawingCircle(100,145,45,90*Math.PI/180,-90*Math.PI/180,1,1,ctx);drawingCircle(100,145,11,0*Math.PI/180,360*Math.PI/180,1,0,ctx);}//要先加载对象才能调用window.onload = drawing;
</script>
</head>
<body><canvas id = "myCanvas" width="200" height="200" style = "border:1px dashed gray;"></canvas>
</body>
</html>

运行效果如下：

相关JavaScript方法：
1，beginPath( )：开始路径
2，closePath ( )：结束路径，并且连接起点和终点
3，arc(横坐标,纵坐标,半径,起始角度,结束角度,旋转方向)：如图

4，stroke( )：将arc画的圆用线描出来，默认黑色
5，strokeStyle：描线的颜色，要在stroke（）之前才能生效
6，fill( )：将封闭的图形内部填充，默认黑色，要改变颜色用fillStyle

下个目标：让阴阳鱼转动起来

转动的阴阳鱼

用canvas画阴阳鱼相关推荐

微信小程序中base64格式的小程序码通过canvas画出来无效
使用场景小程序中的文章详情页面有一个分享功能:用户点击分享按钮,生成一张分享图片(包括封面图,简介以及带有文章ID的小程序码),方便用户保存在本地. 问题说明小程序码通过后台接口获取,格式如下:' ...
关于星空的java小程序_[Java教程]小程序使用Canvas画饼图_星空网
小程序使用Canvas画饼图 2018-10-24 0 先上效果图 -------------------------------------------------------------w --- ...
python程序、画一个笑脸_如何使用canvas画一个微笑的表情（代码示例）
本篇文章给大家带来的内容是关于如何使用canvas画一个微笑的表情(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实习期间让我用canvas画一个表情,比较简单,话不多说 ...
[html] 请使用canvas画一个椭圆
[html] 请使用canvas画一个椭圆 <script> var c=document.getElementById("myCanvas"); var ctx=c. ...
[html] 请使用canvas画一个渐变的长方形
[html] 请使用canvas画一个渐变的长方形 // 普通canvas绘图工具类// umd适配多种引入方式 (function(root, factory) {if (typeof define ...
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中整数坐标值对应的位置恰巧是屏幕象素点中间的夹缝,那么当按 ...
canvas画圆又毛边
canvas画圆又毛边 canvas使用arc()画园有毛边,如图:,只需给其添加width,height即可,直接上代码 <!DOCTYPE html> <html lang=&q ...

用canvas画阴阳鱼

用canvas画阴阳鱼相关推荐

最新文章

热门文章