`
alivoa
  • 浏览: 18216 次
  • 性别: Icon_minigender_2
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

HTML5 画的小浪 代码

HTML5JavaScriptHTML 
阅读更多 
<!DOCTYPE HTML>
<html>
  <head>
    <title>A canvas moveto example</title>
  </head>
  <body>

    <div>
      <canvas id="tutorial" width="150" height="150"></canvas>
    </div>
	 <script type="text/javascript">
        var canvas = document.getElementById('tutorial');
          var ctx = canvas.getContext('2d');
        ctx.beginPath();
			ctx.moveTo(22,14);
			ctx.quadraticCurveTo(8,20,5,34);
			ctx.bezierCurveTo(2, 48, 20, 50, 27, 49);
			ctx.bezierCurveTo(35, 48, 48, 39, 46, 32);
			ctx.bezierCurveTo(44, 25, 38, 28, 38, 28);
			ctx.quadraticCurveTo(39,22,38,21);
			ctx.bezierCurveTo(37, 21, 35, 20, 34, 21);
			ctx.bezierCurveTo(30, 21, 28, 23, 27, 24);
			ctx.bezierCurveTo(26, 24, 27, 22, 27, 22);
			ctx.quadraticCurveTo(28,12,22,14);
			ctx.fillStyle = "#f93b00";
			ctx.fill();
	
		ctx.beginPath();
			ctx.moveTo(19,29);
			ctx.quadraticCurveTo(8,32,8,39);
			ctx.bezierCurveTo(8, 46, 21, 50, 31, 45);
			ctx.bezierCurveTo(41, 41, 40, 34, 37, 32);
			ctx.bezierCurveTo(34, 29, 28, 27, 19, 29);
          	ctx.fillStyle = "#ffffff";
			ctx.fill();
		ctx.beginPath();
			ctx.moveTo(15,40);
    		ctx.quadraticCurveTo(16,34,22,32);
			ctx.bezierCurveTo(28, 31, 29, 36, 29, 38);
   			ctx.bezierCurveTo(29, 40, 25, 46, 20, 45);
			ctx.bezierCurveTo(17, 45, 14, 42, 15, 40);
			ctx.fillStyle = "#09090a";
			ctx.fill();
		
		ctx.beginPath();
			ctx.moveTo(18,40);
    		ctx.quadraticCurveTo(19,37,21,37);
			ctx.bezierCurveTo(24, 37, 23, 41, 21, 42);
   			ctx.bezierCurveTo(18, 43, 17, 41, 18, 40);
			ctx.fillStyle = "#ffffff";
			ctx.fill();
    </script>
  </body>

</html>

 原理特简单，画曲线。。。。很低级。。。

分享到：
| 一个搜集来的圆角组件存档
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics