HTML5 画的小浪代码

最新推荐文章于 2021-11-19 21:23:57 发布

阅读量131

点赞数

分类专栏： xhtml/css 文章标签： HTML5 JavaScript HTML ViewUI

xhtml/css 专栏收录该内容

7 篇文章

订阅专栏

<!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>

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