canvas绘制火柴人

<!doctype html>
<html>
<head>

<style>
#huaban{
border:1px solid;
}
</style>
<script>
</script>
<meta charset="UTF-8">
</head>
<body>
<canvas width="200" height="200" id="huaban">
</canvas>
<script>
var can=document.getElementById("huaban");//获得画板数据
var con=can.getContext('2d');//获得笔刷
con.lineWidth=2;//设置县调平宽度为2个像素
con.beginPath();//起始一个新路径
con.arc(100,50,27,0,Math.PI*2,true);//一个圆形路径
con.stroke();//画出一个线条圆当做脸
con.beginPath();//起始一个新路径
con.arc(100,50,20,0,Math.PI,false);//一个半圆弧路径
con.stroke();//绘制半圆当做嘴
con.beginPath();//起始新的路径
con.arc(91,46,4,0,Math.PI*2,true);
con.fill();//填充两个小圆当做眼睛
con.beginPath();
con.arc(109,46,4,0,Math.PI*2,true);
con.fill();
con.beginPath();//开始新路径
con.moveTo(100,77);//移动到下巴
con.lineTo(100,160);//画一个直线当身子
con.moveTo(100,90);//画两个斜线当手
con.lineTo(75,120);
con.moveTo(100,90);
con.lineTo(125,120);
con.moveTo(100,160);//画俩个斜线当腿
con.lineTo(70,200);
con.moveTo(100,160);
con.lineTo(130,200);
con.stroke();//画出身体
</script>
</body>
</html>

canvas绘制火柴人相关推荐

HTML5的绘图步骤——示例绘制火柴人
目录 HTML5的绘图步骤 1.创建画布 2.获取画布 3.获取画笔 4.绘制图形绘制火柴人 1.源代码 2.运行效果 HTML5的绘图步骤 1.创建画布 <canvas id="画 ...
怎么用python画火柴人_如何用ai绘制火柴人的教程
今天小编带来的是Illustrator的绘制教程,是绘制火柴人噢.下面请看步骤: 工具/原料电脑 Illustrator软件方法/步骤 1 首先打开空白文档 END 方法/步骤2 1 点击椭圆形工 ...
canvas 绘制直线并选中_在画布中使用路径-Canvas的基本操作
一.在画布中使用路径 beginPath() 新建一条路径,路径一旦创建成功,图形绘制命令被指向到路径上生成路径moveTo(x, y) 把画笔移动到指定的坐标(x, y).相当于设置路径的起始点坐标 ...
Canvas加动画，实现火柴人跳绳效果
效果涉及到的知识 1.canvas 2.path和二阶贝塞尔曲线 3.bitmap绘制 canvas 先引用google官方: The Canvas class holds the "dr ...
绘制半圆_Android Canvas 绘制小黄人
❝ 学习往往是枯燥的,如果能用一个有趣 Demo 来学习和练习技术,那对知识的掌握就会更牢固.我在学习 Canvas 绘制 API 的时候就是这样做的. ❞ 截图镇楼效果图我觉得这个绘制小黄人的自 ...
几分钟让小孩的人物涂鸦「动起来」，Meta AI创建了一个奇妙的火柴人世界
视学算法报道编辑:杜伟.陈萍 Meta AI 让儿童手绘「活」了起来. 你有没有想过将一张儿童绘画制作成动画?就如下图,儿童能够绘制出独特和富有创造力的人物和动物:长着双脚的星星.腿超级长的鸟-- ...
使用 HTML5 Canvas 绘制出惊艳的水滴效果
HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...
2020级C语言大作业 - 火柴人打羽毛球
分享20级同学大一上学期用C语言(及少量C++)实现的火柴人打羽毛球.由于同学们刚学了三个月的编程,实现还不够完善,工程代码.图片音乐素材可以从百度网盘下载: 链接:https://pan.baidu ...
第14章火柴人的无尽冒险（《C和C++游戏趣味编程》配套教学视频）
(图书介绍:童晶:<C和C++游戏趣味编程>新书预告) 本章我们将编写一个2D跑酷类游戏,玩家键盘控制火柴人奔跑和跳跃,躲避蝙蝠到达终点.游戏地图随机生成,随着关卡数的增加,游戏难度越来越 ...

canvas绘制火柴人

canvas绘制火柴人相关推荐

最新文章

热门文章