HTML5的绘图步骤——示例绘制火柴人

HTML5的绘图步骤

1、创建画布

2、获取画布

3、获取画笔

4、绘制图形

绘制火柴人

1、源代码

2、运行效果

HTML5的绘图步骤

1、创建画布

2、获取画布

var canvas = document.getElementById('画布名称')

3、获取画笔

var context = canvas.getContext('2d')

4、绘制图形

(1)绘制直线：
A、设置起始点：context.moveTo(x,y)
设置线条的宽度：context.lineWidth = '宽度'
设置端点的形状：context.lineCap = '属性值' 取值有：butt(默认值)、round(圆形)、square(方形)
B、设置端点：context.lineTo(x,y)
设置线条的样式：context.strokeStyle='颜色值'
C、描边：context.stroke( )

注：在绘制图形时要注意逻辑顺序。eg：若是图形已经描边context.stroke( )，这时在其后设置线条的样式：context.strokeStyle='颜色值'，线条的颜色不会发生任何改变。因为计算机运行代码从前往后，这时描边已经完成，无法再加颜色。

eg：绘制一条红色的线段

        //1、获取画布var canvas = document.getElementById('cans')//2、准备画笔var context = canvas.getContext('2d')//3、设置起点context.moveTo(20,100)//4、设置线条宽度context.lineWidth = '15'context.lineCap='round'   //设置端点的形状，butt（默认值，不带端点）、round(圆形)、square(方形)//5、设置端点context.lineTo(200,100)//6、设置线条颜色context.strokeStyle = 'red'//7、描边context.stroke()

代码运行效果图：

(2)重置路径：beginPath();在一张画布上绘制多个图形，要重新定义开始的路径。不重新定义，则下个图形的起始点默认与前一个图形的起始点相同，就会发生图形重叠。
(3)关闭路径：closePath();用于连接图形的起始点和端点，使绘制的图形成为封闭图形。
(4)路径填充：fill()；填充封闭图形内部的留白。

        var canvas = document.getElementById('cans')  //获取画布var context = canvas.getContext('2d')         //准备画笔context.moveTo(100,100)//设置起始点context.lineTo(100,200)//设置端点context.lineTo(200,200)//设置端点context.closePath()    //关闭路径context.fill()  //填充路径

代码运行效果图：

(5)绘制圆：arc(x,y,r,开始角,结束角,方向)；方向取值：true(逆时针)、false(顺时针)

        var canvas = document.getElementById('cans')var ctx = canvas.getContext('2d')ctx.beginPath()//重置路径ctx.arc(100,100,80,0,1.5*Math.PI,true)//表示逆时针画1/4圆。true表示逆时针，false表示顺时针//前俩值确定圆心位置，100,100。80表示圆的半径。0,1.5*Math.PI表示弧度，true表示逆时针ctx.stroke()

代码运行效果图1/4圆弧

绘制火柴人

1、源代码

<body><canvas id="cans" width="1000px" height="1000px">您的浏览器不支持画布      <!--只有浏览器不能运行，才回显示出开始结束标签之间的内容--></canvas><script>var canvas = document.getElementById('cans')var ctx = canvas.getContext('2d')//绘制头部  ctx.lineWidth = '5'ctx.arc(500,100,38,0,2*Math.PI,false)ctx.stroke()//绘制躯干//绘制脖子ctx.beginPath()ctx.lineWidth = '10'ctx.moveTo(500,140)ctx.lineTo(500,160)ctx.stroke()//绘制身体ctx.beginPath()ctx.lineWidth = '30'ctx.moveTo(500,160)ctx.lineTo(500,290)ctx.stroke()//绘制文件夹ctx.beginPath()ctx.lineWidth = '2'ctx.fillStyle='red'ctx.moveTo(450,230)ctx.lineTo(450,280)ctx.lineTo(550,280)ctx.lineTo(550,230)ctx.fill()ctx.closePath()ctx.stroke()  //描边//绘制胳膊ctx.beginPath()ctx.lineWidth = '8'ctx.moveTo(510,165)ctx.lineTo(552,225)ctx.lineTo(500,270)ctx.stroke()//绘制手掌ctx.beginPath()ctx.lineWidth = '5'ctx.arc(500,270,10,0,2*Math.PI,false)ctx.fillStyle = 'black'ctx.fill()ctx.stroke()//绘制腿部//前腿ctx.beginPath()ctx.lineWidth = '10'ctx.moveTo(500,285)ctx.lineTo(480,450)ctx.stroke()//后腿ctx.beginPath()ctx.lineWidth = '10'ctx.moveTo(500,285)ctx.lineTo(520,450)ctx.stroke()//绘制脚部//前脚ctx.beginPath()ctx.lineWidth = '5'ctx.arc(466,450,15,1.0*Math.PI,2*Math.PI,false)ctx.closePath()ctx.stroke()//后脚ctx.beginPath()ctx.lineWidth = '5'ctx.arc(506,450,15,1.0*Math.PI,2*Math.PI,false)ctx.closePath()ctx.stroke()</script>
</body>

2、运行效果

HTML5的绘图步骤——示例绘制火柴人相关推荐

怎么用python画火柴人_如何用ai绘制火柴人的教程
今天小编带来的是Illustrator的绘制教程,是绘制火柴人噢.下面请看步骤: 工具/原料电脑 Illustrator软件方法/步骤 1 首先打开空白文档 END 方法/步骤2 1 点击椭圆形工 ...
canvas绘制火柴人
<!doctype html> <html> <head>  <style> #huaban{ bord ...
使用html画简单的图形,HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程使用html5 canvas 绘制精美的图...
HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以也要好好学习一把. 好好看了一下Canvas的功能,感觉HTML5在客户端交互的功能性越来越强了,今天看了一下Canvas绘图,下边是 ...
2020级C语言大作业 - 火柴人打羽毛球
分享20级同学大一上学期用C语言(及少量C++)实现的火柴人打羽毛球.由于同学们刚学了三个月的编程,实现还不够完善,工程代码.图片音乐素材可以从百度网盘下载: 链接:https://pan.baidu ...
《Java代码成精了——会跳萨日朗的火柴人》实现步骤三：绘画火柴人
在此之前,我们已经实现项目的第二步,处理了每一张图的颜色,我们让小人的颜色是黑色,背景整体调整为白色.本小节要做的就是在这些图片上进行绘画火柴人.因为我们绘画水平有限,我们希望在原图片的轮廓上进行绘画 ...
html5 canvas 画阿迪达斯logo,HTML5 Canvas笔记——HTML5 Canvas绘图绘制太极图
HTML5 Canvas绘图绘制太极图太极图 * { padding: 0; margin: 0; } body { } #myCanvas { background-color: #eee; } ...
火柴人部落大乱斗html5游戏在线玩,火柴人部落战争
火柴人部落战争手游是一款最新的动作闯关休闲玩法手游,游戏中玩家可以自由操控火柴人开启大乱斗,在这里自由经营你的国度,收集武器装备,部落战争激情开战,对游戏感兴趣的话不妨点击下载尝试体验吧! 火柴人部落 ...
微信火柴人html5小游戏,20个好玩的微信小游戏推荐！你玩过几个？
50000+游戏爱好者已加入我们! 每天推荐好玩游戏! 加入我们,沐沐带你发现好游戏! 只有你想不到, 没有我找不到的好游戏! 「良心好游戏推荐」搜罗了好玩的微信小游戏大全, 模拟经营游戏.恐怖游戏 ...
几分钟让小孩的人物涂鸦「动起来」，Meta AI创建了一个奇妙的火柴人世界
视学算法报道编辑:杜伟.陈萍 Meta AI 让儿童手绘「活」了起来. 你有没有想过将一张儿童绘画制作成动画?就如下图,儿童能够绘制出独特和富有创造力的人物和动物:长着双脚的星星.腿超级长的鸟-- ...

HTML5的绘图步骤——示例绘制火柴人

HTML5的绘图步骤

1、创建画布

2、获取画布

3、获取画笔

4、绘制图形

绘制火柴人

1、源代码

2、运行效果

HTML5的绘图步骤——示例绘制火柴人相关推荐

最新文章

热门文章