canvas手工制作叮当猫

最新推荐文章于 2021-12-30 10:34:37 发布
最新推荐文章于 2021-12-30 10:34:37 发布
阅读量150 收藏
点赞数
原文链接：http://www.cnblogs.com/vanliga/p/4840548.html
版权

HTML

<!DOCTYPE html>
<html>
<head>
<title>canvas叮当猫</title>
</head>
<body>
<canvas id="canvas" width="800px" height="1000px">您的浏览器不支持canvas,请升级或者更换其他浏览器!</canvas>
</body>
</html>

 

 

CSS

html {
background : #fff;
}

 

 

JS

function mlog(log){

console.log("Info: "+log);
};

function zuobiao(ctx, width, height){
ctx.fillStyle ="black";
for(var j = 0; j <= height; j+=50){
ctx.lineWidth = 1;
ctx.lineStyle = "red";
ctx.beginPath();
ctx.moveTo(0,j);
ctx.lineTo(width,j);
ctx.stroke();
}
for(var i = 0; i <= width; i+=50){
ctx.lineWidth = 1;
ctx.lineStyle = "#FF0000";
ctx.beginPath();
ctx.moveTo(i,0);
ctx.lineTo(i,height);
ctx.stroke();
}
for(var i = 0; i <= width; i+=50){
for(var j = 0; j <= height; j+=50){
ctx.font="12px Arill";
ctx.beginPath();
ctx.fillText(i+","+j, i, j);
ctx.stroke();
}
}
}

(function(){
mlog("Hi,I'm vanliga!");
var ctx = init();

//左手
ctx.lineWidth = 9;
ctx.lineStyle="black";
ctx.fillStyle = "#FFFFFF";
ctx.beginPath();
ctx.arc(654, 543, 52, 0, 2*Math.PI, true);
ctx.stroke();
ctx.fill();
//双脚
BezierEllipse2(ctx, 270, 720, 98, 52, 5, "black", "");
BezierEllipse2(ctx, 530, 720, 98, 52, 5, "black", "");
//身体
ctx.lineWidth = 9;
ctx.lineStyle="black";
ctx.lineCap = "around";
ctx.fillStyle = "#00A0E9";
ctx.beginPath();
ctx.moveTo(568,445);
ctx.quadraticCurveTo(630,478,650,500);
ctx.quadraticCurveTo(650,559,600,550);
ctx.quadraticCurveTo(579,540,550,518);
ctx.quadraticCurveTo(553,510,550,480);
ctx.quadraticCurveTo(553,510,550,518);
ctx.quadraticCurveTo(557,510,548,650);
ctx.quadraticCurveTo(579,680,570,700);
ctx.quadraticCurveTo(500,720,440,700);
ctx.quadraticCurveTo(400,650,360,700);
ctx.quadraticCurveTo(300,720,230,700);
ctx.quadraticCurveTo(224,675,250,650);
ctx.quadraticCurveTo(253,510,259,480);
ctx.quadraticCurveTo(253,510,255,520);
ctx.quadraticCurveTo(253,510,100,400);
ctx.quadraticCurveTo(120,360,150,350);
ctx.quadraticCurveTo(203,380,220,375);
ctx.quadraticCurveTo(203,380,568,445);
ctx.stroke();
ctx.fill();
BezierEllipse2(ctx, 400, 600, 110, 71, 5, "#FFFFFF", "fill");
BezierEllipse2(ctx, 400, 600, 110, 71, 5, "black", "");
ctx.lineWidth = 4;
ctx.beginPath();
ctx.moveTo(325,600);
ctx.quadraticCurveTo(400,610,475,600);
ctx.quadraticCurveTo(400,700,325,600);
ctx.stroke();
//脸
ctx.lineWidth = 5;
ctx.lineStyle="black";
ctx.fillStyle = "#00A0E9";
ctx.beginPath();
ctx.arc(400, 300, 200, 0, 2*Math.PI, true);
ctx.fill();
ctx.stroke();

ctx.lineWidth = 5;
ctx.lineStyle="black";
ctx.fillStyle = "#FFFFFF";
ctx.beginPath();
ctx.arc(400, 340, 160, 0, 2*Math.PI, true);
ctx.fill();
ctx.stroke();

//眼睛
BezierEllipse2(ctx, 345, 200, 50, 65, 5, "#FFFFFF", "fill");
BezierEllipse2(ctx, 345, 200, 50, 65, 5, "black", "");
BezierEllipse2(ctx, 455, 200, 50, 65, 5, "#FFFFFF", "fill");
BezierEllipse2(ctx, 455, 200, 50, 65, 5, "black", "");

BezierEllipse2(ctx, 365, 210, 20, 30, 5, "#000", "fill");
BezierEllipse2(ctx, 435, 210, 20, 30, 5, "#000", "fill");

BezierEllipse2(ctx, 375, 210, 8, 15, 5, "#FFFFFF", "fill");
BezierEllipse2(ctx, 425, 210, 8, 15, 5, "#FFFFFF", "fill");

//鼻子
ctx.lineWidth = 5;
ctx.lineStyle="black";
ctx.fillStyle = "#E60012";
ctx.beginPath();
ctx.arc(400, 280, 40, 0, 2*Math.PI, true);
ctx.fill();
ctx.stroke();

ctx.fillStyle = "#FFFFFF";
ctx.beginPath();
ctx.arc(390, 270, 16, 0, 2*Math.PI, true);
ctx.fill();

ctx.beginPath();
ctx.moveTo(400, 320);
ctx.lineTo(400, 460);
ctx.stroke();

//嘴
ctx.lineWidth = 5;
ctx.lineStyle="black";
ctx.lineCap = "round";
ctx.beginPath();
ctx.moveTo(280,410);
ctx.bezierCurveTo(360,480,440,480,520,410);
ctx.stroke();

//左胡子
ctx.moveTo(360,320);
ctx.lineTo(270,260);
ctx.stroke();
ctx.moveTo(360,350);
ctx.lineTo(250,340);
ctx.stroke();
ctx.moveTo(360,380);
ctx.lineTo(260,400);
ctx.stroke();

//右胡子
ctx.moveTo(440,320);
ctx.lineTo(530,260);
ctx.stroke();
ctx.moveTo(440,350);
ctx.lineTo(550,340);
ctx.stroke();
ctx.moveTo(440,380);
ctx.lineTo(540,400);
ctx.stroke();

//围巾
ctx.lineWidth = 7;
ctx.lineStyle="black";
ctx.fillStyle = "#E60012";
ctx.beginPath();
ctx.moveTo(240,427);
ctx.quadraticCurveTo(400,530,560,427);
ctx.quadraticCurveTo(570,437,560,447);
ctx.quadraticCurveTo(400,560,240,450);
ctx.quadraticCurveTo(230,437,242,427);
ctx.stroke();
ctx.fill();

//铃铛
ctx.lineWidth = 9;
ctx.lineStyle="black";
ctx.fillStyle = "#FDD000";
ctx.beginPath();
ctx.arc(400, 530, 40, 0, 2*Math.PI, true);
ctx.stroke();
ctx.fill();

ctx.lineWidth = 8;
ctx.lineStyle="black";
ctx.lineCap = "around";
ctx.fillStyle = "#FDD000";
ctx.beginPath();
ctx.moveTo(365,510);
ctx.quadraticCurveTo(400,498,435,510);
ctx.quadraticCurveTo(450,510,445,518);
ctx.quadraticCurveTo(400,505,355,518);
ctx.quadraticCurveTo(350,510,365,510);
ctx.stroke();
ctx.fill();

ctx.lineWidth = 8;
ctx.lineStyle="black";
ctx.fillStyle = "#7D6B56";
ctx.beginPath();
ctx.arc(400, 542, 8, 0, 2*Math.PI, true);
ctx.stroke();
ctx.fill();

ctx.lineWidth = 5;
ctx.lineStyle="black";
ctx.beginPath();
ctx.moveTo(400, 554);
ctx.lineTo(400, 570);
ctx.stroke();


//右手
ctx.lineWidth = 9;
ctx.lineStyle="black";
ctx.fillStyle = "#FFFFFF";
ctx.beginPath();
ctx.arc(100, 350, 52, 0, 2*Math.PI, true);
ctx.stroke();
ctx.fill();


//zuobiao(ctx, 800, 1000);

})();


function init(){
var can = document.getElementById("canvas");
//can.style.border = "1px solid red";
var ctx = can.getContext("2d");
return ctx;
}

//椭圆的绘制方法
/*context为Canvas的2D绘图环境对象，
x为椭圆中心横坐标，
y为椭圆中心纵坐标，
a为椭圆横半轴长，
b为椭圆纵半轴长*/
function BezierEllipse2(ctx, x, y, a, b, lineWidth, color, method)
{
var k = .5522848,
ox = a * k, // 水平控制点偏移量
oy = b * k; // 垂直控制点偏移量
if(method == "fill"){
ctx.fillStyle = color;
}
else{
ctx.lineWidth = lineWidth;
ctx.storkeStyle = color;
}
ctx.beginPath();
//从椭圆的左端点开始顺时针绘制四条三次贝塞尔曲线
ctx.moveTo(x - a, y);
ctx.bezierCurveTo(x - a, y - oy, x - ox, y - b, x, y - b);
ctx.bezierCurveTo(x + ox, y - b, x + a, y - oy, x + a, y);
ctx.bezierCurveTo(x + a, y + oy, x + ox, y + b, x, y + b);
ctx.bezierCurveTo(x - ox, y + b, x - a, y + oy, x - a, y);
ctx.closePath();
if(method == "fill"){
ctx.fill();
}
else{
ctx.stroke();
}

};

 

转载于:https://www.cnblogs.com/vanliga/p/4840548.html

初仔仔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5 Canvas机器猫图形特效.zip
07-04
HTML5 Canvas机器猫图形特效是一款卡通可爱的叮当猫图形实例代码。
html5 canvas 实现一个简单的叮当猫头部
weixin_30496431的博客
07-05 202
html5的canvas是很强大的，今天也是温习了一下之前的基础知识，然后学着做了一个简单的小案例。虽然在这一块几乎空白，但还是乐于尝试...... 效果如下： 代码如下： <div class="doraemon"> <canvas id="face" width="600" height="1500">您的浏览器不支持canvas</can...
html5自动生成的头部代码,HTML5利用canvas绘制哆啦A梦头部（代码实例）
weixin_28895791的博客
06-02 332
html5的canvas是很强大的，下面本篇文章使用html5 canvas 实现一个简单的哆啦A梦头部。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。效果如下：代码如下：您的浏览器不支持canvasvar face = document.getElementById('face').getContext("2d");face.arc(252,252,250,0,360*Math...
java绘图机器猫_canvas哆啦A梦图形代码
weixin_32933155的博客
02-17 1171
HTML5 canvas哆啦A梦机器猫图形代码是利用HTML5 canvas技术绘制的机器猫。canvas画图的基本知识context:一直觉得这个翻译成“上下文”真够蛋疼的，context是一个封装了很多绘图功能的对象，获取这个对象的方法是var context =canvas.getContext("2d");也许这个2d勾起了大家的无限遐想，但是很遗憾的告诉你html5还只是个少女，不提供3...
canvas综合应用绘制哆啦A梦
小圣贤君的博客
11-16 4295
HTML5中canvas元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.通过这一元素，我们可以在画布上画出各种图形，线条，矩形，圆形，椭圆，字体，渐变等，当然可以自己设计组合绘制自己想要的图案，今天，笔者通过canvas绘制了一个哆啦A梦的图案，其中，应用了颜色渐变，贝塞尔曲线等知识点，是对canvas的一个较综合的应用。请看效果图： 通过canvas画图需要确定各个点，比
Canvas制作动态进度加载水球
王乐平 技术博客
12-09 1万+
前言之前看到一些球型的动态加载的效果，一直想自己动手做一个，正好这段时间重温了一个Canvas，所以就尝试了一下。样式预览实现思路关于水波的实现，使用了sin()函数，通过每一帧不断的移动sin()函数曲线，实现水波动态效果。然后，通过绘制圆形路径，进行clip()，实现球型效果。sin()函数相关这里说一下sin()函数的相关基础，对于绘制水波的影响。看一下图，回顾一下中学sin()函数的基础。从
Html2Canvas 常见问题
Eighteen Z
07-28 5390
1. 文字样式丢失且都变成为最小号字体。 解决方案： 需要截图的节点根样式添加font-variant: normal； 2. 文字向下偏移。 解决方案： 指定html2canvas的版本号为1.0.0-alpha.12 3. 不完整，缺失，留白。 出现情况： 当截图区域超过视图高度，且滚动条未处在顶部时，会出现。 解决方案： 截图之前控制滚动条至顶部。 4. 模糊，不清晰。 出现情况： 通常是图片设置为背景的情况下，截图会比较模糊。 解决方案： 将背景图通过img标签加定位的方式实现。 ...
HTML5 Canvas制作雷达图实战
热门推荐
王乐平 技术博客
03-05 1万+
雷达图又叫蜘蛛网图，是一种对各项数据查看很明显的表现图，在很多游戏中，对游戏中的每个角色的分析图一般也用这种图。下面，用HTML5的Cavas来实现雷达图。效果一、创建Canvasvar mW = 400; var mH = 400; var mCtx = null;var canvas = document.createElement('canvas'); document.body.append
canvas绘制video
TeroZhang的博客
12-30 3970
canvas绘制video 主要思路： Canvas中可以使用ctx.drawImage(video, x, y,width,height)来对视频当前帧的图像进行绘制，其中video参数就是HTML5中的video标签。故我们可以通过Canvas的动态效果不断获取video当前画面，渲染到Canvas画布上。并且通过改变video标签的属性，来实现在Canvas中处理视频的一整套效果。可以理解成在Canvas中新建一个播放器，该播放器视频源是video标签创建，播放器的各种方法最终指向对video标签本身
使用canvas和js制作五子棋
01-14
使用canvas以及原生js写的一个五子棋游戏
使用canvas制作签名
01-02
canvas制作签名
Canvas制作双环碰撞动画效果特效代码
03-20
Canvas制作双环碰撞动画效果是一款在黑色背景下两个彩色圆环自由运动碰撞动画效果。
HTML5Canvas：制作动画特效
01-27
下面是你在canvas上绘制一个动画帧的基本步骤：我们需要一种方法来在指定时间内执行我们的绘制图形函数。有两种方式可以控制动画的执行。第一种是使用下面的三个window对象上的方法：window.setInterval()，window....
HTML5 Canvas 制作时钟.rar
02-03
如何在画布上（Canvas）画一个时钟，基于HTML5实现的时钟效果，利用canvas实现的时钟效果。
哆啦A梦蓝胖子来啦，html5+div+css3代码绘制机器猫
08-20 1万+
哆啦A梦蓝胖子来啦，之前就有大神画过蓝胖子。本站隆重推出机器猫超盟版。现在主流浏览器对css3支持良好，您可以通过Chrome,Firfox,Safari,IE9+等浏览器完美预览。本站后期将推出动画版本，尽请期待！ 在线demo地址：http://www.aweb.cc/Subject/index/channel/pokonyan.html 作者：lovebslq
node-v4.8.6-win-x64.zip
05-07
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
基础运维技能（下）md格式笔记
最新发布
05-07
基础运维技能（下）md格式笔记
node-v8.1.2-linux-armv7l.tar.xz
05-07
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
黑马程序员 C语言学习笔记
05-07
持续更新
canvas制作笑脸
10-27
使用canvas可以制作出各种图形，包括卡通笑脸。下面是一个简单的制作卡通笑脸的代码示例： ``` var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); // 画脸,设置脸的填充...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值