网站制作需要学什么语言中国基建人才培训网证书查询
网站制作需要学什么语言,中国基建人才培训网证书查询,网站后台 更新缓存,岳阳网络注意#xff1a;手机#xff08;APP#xff09;打开#xff0c;内容显示更佳#xff0c;不会的私聊博主即可 想要拿代码或加入学习计划#xff08;** 博主会监督你并且教你写文章 **#xff09;的拉到最下面#xff08;PC端Web打开#xff09;加博主即可#xff0c;目…注意手机APP打开内容显示更佳不会的私聊博主即可 想要拿代码或加入学习计划** 博主会监督你并且教你写文章 **的拉到最下面PC端Web打开加博主即可目录也在最下面。 参加1_bit博主前端学习计划发文时在头部记得加上本专栏链接示例如下 我已加入 1_bit 博主的免费前端 站起来 学习计划专栏链接https://blog.csdn.net/a757291228/category_11609526.html
一、canvas
1_bit其实现在我们已经学完大部分的基础内容了马上学到 CSS 就可以开始实战了。
小媛那么快吗
1_bit对呀咱们这一节是第一个阶段的最后的一篇文章之后的话是以 CSS 为主了然后剩下的 HTML 内容需要结合 CSS 进行讲解后面还会有专门的 JavaScript 课程将会更为详细的讲解 JavaScript。
小媛喔明白了。
1_bit那这一节课咱们就简单的使用 js 来画画吧
小媛哈可以画画吗
1_bit对的咱们使用 HTML5 的 canvas 来画画。
小媛是使用 JavaScript 进行图像绘制
1_bit对的。
小媛那什么是 canvas 呢
1_bit顾名思义 canvas 就是一块画布咱们在上面可以绘制图像。
小媛还真是字面意思。
1_bit那咱们现在就开始吧。
二、canvas 基础绘制线段
1_bit在 html 中用 canvas 标签表示画布如下代码所示。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title1_bit 的前端实战课程11 javascript/titlestylecanvas{background-color:bisque;}/style
/head
bodycanvas idtCanvas width500 height500/canvas
/body
/html1_bit像以上代码中咱们可以发现我在 head 部分添加了一个 style在 style 中添加了一个 canvas 的背景色样式是为了给予这个canvas背景色方便查看。
小媛不然就是跟界面一样的颜色然后就不好观察了吗
1_bit对的是这个意思你还可以看到这个canvas 我还给予了宽高和ID这些是要给予到的一些基本属性。
小媛明白了。
1_bit接下来咱们看看这个 canvas 如何进行使用如以下代码示例。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title1_bit 的前端实战课程11 javascript/titlestylecanvas{background-color:bisque;}/style
/head
bodycanvas idtCanvas width500 height500/canvasscriptvar canvasdocument.getElementById(tCanvas);//通过 getElementById 取得对应的 canvas 对象var contextcanvas.getContext(2d);//表示需要绘制图像的类型为2dcontext.beginPath();//充值画布路径你画的线段、线条都是路径context.moveTo(100,100);//下笔点移动到某一个位置context.lineTo(200,200);//从下笔点绘制一条线段到 xy 为 200 处context.stroke();//开始绘制/script
/body
/html小媛一下子好多东西感觉都看不懂了。
1_bit没关系咱们慢慢来首先查看第一条代码
var canvasdocument.getElementById(tCanvas);1_bit以上代码中document.getElementById(tCanvas);你应该明白表示得到 id 为 tCanvas 的这个 dom 节点这个节点为一个 canvas 标签那么此时变量 canvas 就表示了这个 canvas 标签这点明白吧
小媛明白意思就是这是个 canvas 对象了可以使用这个对象所对应的一些功能。
1_bit你乱猜的吧不过猜对了。我们接着查看下一句代码
var contextcanvas.getContext(2d);1_bit这一句代码中的 canvas 对象就是指对应的画布对象因为刚刚使用了 getbyID 函数获取到了对应的节点此时这个 canvas 就表示这个节点通过 getContext 指定当前所需要绘制的图片类型在此传入了参数 2d表示接下来以 2d 绘制为主。
小媛明白了。
1_bit再接着代码是
context.beginPath();1_bit这段代码表示“清空画布”或者说是重置画布的内容让画布干净些。
小媛这个明白檫黑板一样的道理。
1_bit接着到代码
context.moveTo(100,100);1_bit这段代码表示将下笔的点移动到 xy 值为 100100 处。
小媛这个意思
1_bit对呀move to 意思不是说移动到哪里吗
小媛原来如此。
1_bit接下来代码
context.lineTo(200,200);1_bit的意思也很简单就是你之前使用 moveTo 找到了一个洛必点那么现在 lineTo 就是画一条直线你要把这一条直线画到哪那 200200 就是 xy 的坐标。
小媛那么简单。
1_bit那你认为现在的线段已经开始“绘制”了吗
小媛绘制了呀刚刚不是都代码写了吗
1_bit还差一步最后一个代码
context.stroke();1_bit才是表示开始绘制你可以理解成之前所写的代码只是你在描述你要绘制的步骤最后一步代码则是表示将那些你要绘制的路径进行绘制。
小媛明白了所以最后一句代码不能少。
1_bit是的。
三、矩形绘制
1_bit接下来咱们来看看怎么绘制一个矩形吧
小媛一条一条线段的画
1_bit哪有那么麻烦很简单的直接使用一个方法 fillRect下面是一个完整的示例。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title1_bit 的前端实战课程11-1 javascript/titlestylecanvas{background-color:bisque;}/style
/head
bodycanvas idtCanvasa width500 height500/canvasscriptvar canvasdocument.getElementById(tCanvasa);var contextcanvas.getContext(2d);context.beginPath();context.fillRect(10,10,300,400);/script
/body
/html小媛不用 stroke 方法了吗
1_bit对的在这里直接使用 fillRect 方法绘制一个矩形其中 1010 是你的落笔点或者你理解为起始绘制坐标随后的 300 和 400 分别是对应的宽和高这样的话就可以绘制出如下的矩形了。 小媛不过黑色好丑怎么改颜色
1_bit那你只需要添加 fillStyle 属性即可例如 context.fillStyle #FF0000; 。 1_bit那么绘制出来的图像将会按照你给予的颜色进行填充。
小媛那我不想填充颜色呢
1_bit那你只需要将 fillRect 方法替换成 strokeRect 方法即可fillRect 是填充绘制矩形 strokeRect 则是不填充 1_bit绘制的结果如下 小媛那怎么样指定一个颜色是线条颜色呢
1_bit只需要给予 strokeStyle 属性设置一个颜色即可例如 context.strokeStyle #FF0000;。 1_bit这样的话就可以绘制出指定颜色的矩形了。
三、三角形绘制
小媛那三角形怎么绘制
1_bit要绘制三角形我们需要搞懂线段的绘制的概念咱们看以下代码。
bodycanvas idtCanvasa width300 height300/canvasscriptvar canvasdocument.getElementById(tCanvasa);//通过 getElementById 取得对应的 canvas 对象var contextcanvas.getContext(2d);//指定了您想要在画布上绘制的类型context.lineTo(20, 20);context.lineTo(20, 170);context.lineTo(170, 170);context.lineTo(20, 20);context.stroke();/script
/body1_bit以上代码中首先把落笔点放在了xy均为20处接下来绘制一条线段到 20,170 处那么此时肯定是一条垂直的直线接着再从20,170 处绘制一条直线到 170,170 处那么此时就有了三角形的两条边接着再从 170170 处返回最先落笔点那么此时三角形绘制完毕。 小媛原来落笔点就是你绘制的的线段的最后坐标处呀。
1_bit对的不过你注意一定要在路径编写完代码后添加 stroke 方法。
小媛明白了那怎么填充颜色呢
1_bit填充颜色很简单你只需要添加 fill 方法即可context.fill();。 小媛接下来我该问如何改变填充色了。
1_bit填充色使用 fillStyle 例如 context.fillStyle #FF0000;要注意线段需要闭合才可以填充颜色哟。 小媛明白了。
目录
【前端就业课 第一阶段】HTML5 零基础到实战十一canvas 基础 【前端就业课 第一阶段】HTML5 零基础到实战十JavaScript基础一篇入门 【前端就业课 第一阶段】HTML5 零基础到实战九列表 【前端就业课 第一阶段】HTML5 零基础到实战八表单详解 【前端就业课 第一阶段】HTML5 零基础到实战七文字及图片样式 【前端就业课 第一阶段】HTML5 零基础到实战六表格详解 【前端就业课 第一阶段】HTML5 零基础到实战五基础元素 【前端就业课 第一阶段】HTML5 零基础到实战四伪类与伪元素 【前端就业课 第一阶段】HTML5 零基础到实战三一篇文CSS基础入门 【前端就业课 第一阶段】HTML5 零基础到实战二超链接 【前端就业课 第一阶段】HTML5 零基础到实战一基础代码结构详解
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/92747.shtml
如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!