用HTML代码画画(html画布代码)
admin 发布:2022-12-20 00:03 126
今天给各位分享用HTML代码画画的知识,其中也会对html画布代码进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!
本文目录一览:
HTML5 Canvas基本绘制线条教程
HTML5 Canvas基本绘制线条教程
怎么画线条?和现实中画画差不多:
1.移动画笔,使画笔移动至绘画的开始处
2.确定第一笔的停止点
3.规划好之后,选择画笔(包括画笔的粗细和颜色等)
4.确定绘制
因为Canvas是基于状态的绘制(很重要,后面会解释),所以前面几步都是在确定状态,最后一步才会具体绘制。
1.移动画笔(moveTo())
之前我们获得了画笔context,所以以此为例,给出改方法的使用实例——context.moveTo(100,100)。这句代码的意思是移动画笔至(100,100)这个点(单位是px)。记住,这里是以canvas画布的左上角为笛卡尔坐标系的原点,且y轴的正方向向下,x轴的正方向向右。
2.笔画停点(lineTo())
同理,context.lineTo(600,600)。这句的意思是从上一笔的停止点绘制到(600,600)这里。不过要清楚,这里的moveTo()``lineTo()都只是状态而已,是规划,是我准备要画,还没有开始画,只是一个计划而已!
3.选择画笔
这里我们暂且只设置一下画笔的颜色和粗细。
context.lineWidth = 5,这句话的意思是设置画笔(线条)的粗细为10px。
context.strokeStyle = "#AA394C",这句话的意思是设置画笔(线条)的颜色为玫红色。
因为Canvas是基于状态的绘制,所以我们在选择画笔粗细和颜色的同时,其实也是选择了线条的粗细和颜色。
4.确定绘制
确定绘制只有两种方法,fill()和stroke(),有点绘画基础的应该知道,前者是指填充,后者是指描边。因为我们只是绘制线条,所以只要描边就可以了。调用代码context.stroke()即可。
画一个线条
不就一条线段吗!废话了这么多!那我们就开始画吧。
JavaScript Code复制内容到剪贴板你的浏览器居然不支持Canvas?!赶快换一个吧!!
运行结果:
我还标注了一个页面解析图,供大家参考。
这里我将原本
标签中的width和height去掉了,但在JavaScript代码中设置了canvas对象的width和height的属性。
小结:要设置画布的大小,只有这两种方法
1.在标签中设置;
2.在JS代码中设置canvas的'属性.
怎么样,是不是非常的酷。接下来我们要加快脚步了,绘制一个多线条组成的图形。是不是感觉自己离艺术家又进了一步呢?别看这只是简简单单的一条线段,这一画只是我们的一小步,但却是人类的一大步!
绘制折线
上面我们已经成功绘制了一条线段。那么,如果我要绘制有两个笔画甚至是很多笔画的折线怎么办呢?
聪明的小伙伴肯定已经想到了,这还不简单,复用lineTo()就可以了。下面我就献丑随便画了一条优美的折线~
JavaScript Code复制内容到剪贴板你的浏览器居然不支持Canvas?!赶快换一个吧!!
运行结果:
绘制多条折线
那同理,我们要绘制多条样式各不相同的折线怎么办呢?比如我们在这里画三条折线,分别是红色、蓝色、黑色。聪明的小伙伴肯定想到了,这还不简单,只需要平移一下再改下画笔颜色就行了。代码格式都一样的,复制就可以了。代码如下。
JavaScript Code复制内容到剪贴板你的浏览器居然不支持Canvas?!赶快换一个吧!!
运行结果:
咦?是不是很奇怪?说好的先红色,再蓝色,再黑色呢?怎么全是黑色了?其实,这里的原因是我之前一直强调的一点——Canvas是基于状态的绘制。
什么意思呢?其实这段代码每次使用stroke()时,它都会把之前设置的状态再绘制一遍。第一次stroke()时,绘制一条红色的折线;第二次stroke()时,会再重新绘制之前的那条红色的折线,但是这个时候的画笔已经被更换成蓝色的了,所以画出的折线全是蓝色的。换言之,strokeStyle属性被覆盖了。同理,第三次绘制的时候,画笔颜色是最后的黑色,所以会重新绘制三条黑色的折线。所以,这里看到的三条折线,其实绘制了3次,一共绘制了6条折线。
那么,我想绘制三条折线,难道就没有办法了吗?艺术家之魂到此为止了么?没救了么?不,还有办法。
使用beginPath()开始绘制
为了让绘制方法不重复绘制,我们可以在每次绘制之前加上beginPath(),代表下次绘制的起始之处为beginPath()之后的代码。我们在三次绘制之前分别加上context.beginPath()。
JavaScript Code复制内容到剪贴板你的浏览器居然不支持Canvas?!赶快换一个吧!!
可以看到,这里得到了我们预想的结果。因为使用了beginPath(),所以这里的绘制过程如我们所想的那样,只绘制了三次,而且每次只绘制一条折线。beginPath()是绘制设置状态的起始点,它之后代码设置的绘制状态的作用域结束于绘制方法stroke()、fill()或者closePath(),至于closePath()之后会讲到。
所以我们每次开始绘制前都务必要使用beginPath(),为了代码的完整性,建议大家在每次绘制结束后使用closePath()。 ;
html 里怎么画一个矩形
这个可以用canvas来画,先说最简单的一种 就是给一个盒子 加上边框
方法一:html部分写一个div
div/div
css 部分:div{
width:200px; //给200像素的宽
height:200px; //给200像素的高
border:1px solid #000; //给一个边框 颜色为黑色
background:transparent; // 给这个盒子一个透明的背景色
}
好了 ,这个是一个非常简单的 矩形盒子,不过通常都是用H5 的canvas来做的
方法二: html代码 ,创建canvas画布
canvas id="myCanvas"您的浏览器不支持H5 canvas属性/canvas
然后就是js 部分了
var c=document.getElementById("myCanvas"); //获取canvas
var ctx=c.getContext("2d"); 创建一个2D 对象
ctx.beginPath(); //
ctx.lineWidth="6"; //线条宽度
ctx.strokeStyle="red"; //设置为黑色
ctx.rect(5,5,290,140); //创建矩形,起始点的x y坐标,和矩形宽高
ctx.stroke(); //绘制矩形(无填充) [有填充用 ctx.fill()]
也是可以直接写
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100); //起始坐标和填充色
方法三:通过绘制路径来画矩形
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10); //起始点
cxt.lineTo(50,10); //结束点 同时也是下一个结束点的起始点
cxt.lineTo(50,50);
cxt.lineTo(10,50);
cxt.lineTo(10,10);
cxt.stroke();
如何运用HTML5画图
工具/材料
Sublime Text
01
首先要准备一个画布,如下图所示,在HTML5中我们用canvas来表示画布
02
然后我们在script脚本中获取画布对象,如下图所示,运用JS的getElementById方法即可
03
接下来我们通过画布对象的getContext方法来获取上下文2d对象,如下图所示,我们要操作的内容都在里面
04
然后我们给2d上下文填充背景色,如下图所示,运用上下文的fillStyle属性即可
05
接下来,运用上下文的fillRect方法来画一个矩形,注意里面的四个值就是四个坐标,如下图所示
06
最后我们运行界面程序,你会看到如下图所示的红色矩形样例,你可要和上面的坐标对应一下
07
当然2d上下文中还可以画其他的图形,如下图所示的圆形,大家根据自己的需要应用即可
用HTML代码画画的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于html画布代码、用HTML代码画画的信息别忘了在本站进行查找喔。
版权说明:如非注明,本站文章均为 AH站长 原创,转载请注明出处和附带本文链接;
相关推荐
- 05-09网页代码,网页代码快捷键
- 05-06单页网站的代码(完整的网页代码)[20240506更新]
- 05-06个人主页图片代码(个人主页图片代码怎么弄)[20240506更新]
- 05-06提取微信名片代码(微信名片信息提取)[20240506更新]
- 05-06php后台权限管理代码(php管理员权限)[20240506更新]
- 05-06付费观看代码php(付费观看代码)[20240506更新]
- 05-06在线html执行代码(html怎么运行)[20240506更新]
- 05-06源代码管理资源管理器(资源管理器运行代码)[20240506更新]
- 05-06代码源软件库(程序代码库)[20240506更新]
- 05-06点击弹出密码代码(点击弹出密码代码错误)[20240506更新]
取消回复欢迎 你 发表评论:
- 标签列表
- 最近发表
- 友情链接