canvas绘制动画

Html

Css

绘制路径??圆拱

 body {
	text-align:center;
}
canvas {
	background:#f0f0f0;
}

var ctx = c8.getContext('2d');

//openMouth();
 //closeMouth();
 var isOpen = true;
 setInterval(function() {
     ctx.clearRect(0, 0, 600, 400); //清画布
     if (isOpen) { //当前张嘴，则闭上
         closeMouth();
         isOpen = false;
     } else { //当前闭嘴，则张开
         openMouth();
         isOpen = true;
     }
 }, 500);

function openMouth() {
     //绘制外框
     ctx.beginPath();
     ctx.arc(300, 200, 100, 45 * Math.PI / 180, 315 * Math.PI / 180);
     ctx.lineTo(300, 200);
     ctx.closePath();
     ctx.fillStyle = '#fc8';
     ctx.fill();
     ctx.stroke();

//绘制眼睛
     ctx.beginPath();
     ctx.arc(300, 150, 25, 0, 2 * Math.PI);
     ctx.fillStyle = '#2af';
     ctx.fill();

//绘制眼神光
     ctx.beginPath();
     ctx.arc(300 + 15, 150 - 12, 5, 0, 2 * Math.PI);
     ctx.arc(300 + 7, 150 - 20, 3, 0, 2 * Math.PI);
     ctx.fillStyle = '#fff';
     ctx.fill();
 }

function closeMouth() {
     //绘制外框
     ctx.beginPath();
     ctx.arc(300, 200, 100, 0, 2 * Math.PI);
     ctx.lineTo(300, 200);
     ctx.fillStyle = '#fc8';
     ctx.fill();
     ctx.stroke();

//绘制眼睛
     ctx.beginPath();
     ctx.arc(300, 150, 25, 0, 2 * Math.PI);
     ctx.fillStyle = '#2af';
     ctx.fill();

//绘制眼神光
     ctx.beginPath();
     ctx.arc(300 + 15, 150 - 12, 5, 0, 2 * Math.PI);
     ctx.arc(300 + 7, 150 - 20, 3, 0, 2 * Math.PI);
     ctx.fillStyle = '#fff';
     ctx.fill();
 }

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

canvas绘制动画



代码描述：用canvas路径绘制圆拱,且有张嘴闭嘴,眨眼睛等动画效果

本案例采用html5中的canvas,使用路径绘制圆拱,采用原生js编写了张嘴闭嘴等动画效果!

1

最新

发表评论全部评论

暂时没有评论！

拾年_660480

2017/8/31 19:23:07

这个还是可以的！
回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

wangshulan

相关代码

绘制路径??圆拱

canvas绘制动画

最新