本站业务范围:1、PC端软件开发、网站开发 2、移动端APP、网站、微信接口、微商城开发 3、视频教程、课程设计和辅导 4、单片机开发 5、串口通讯调试
 当前位置:文章中心 >> web前端技术
立即购买视频教程 canvas学习笔记
夜鹰教程网 来源:www.yyjcw.com 日期:2017-11-6 23:37:34
如何学好canvas呢?

这篇文章不能解决你的问题?我们还有相关视频教程云课堂 全套前端开发工程师培训课程

微信号:yyjcw10000 QQ:1416759661  远程协助需要加QQ!

业务范围:视频教程|程序开发|在线解答|Demo制作|远程调试| 点击查看相关的视频教程

技术范围:全端开发/前端开发/webapp/web服务/接口开发/单片机/C#/java/node/sql server/mysql/mongodb/android/。 



点击查看canvas相关的视频教程


功夫不是一天练成的,一门新技术不是你学着做个demo就掌握了的,我们先要一点一点地学习基础知识才行呀。刚开始学html5的时候,我们都会先接触到canvas,api给的方法有很多,我是这样学的,自己写个demo,一个方法一个属性的去试,看它出来是个什么样子的。在这里我主要标记一下,我在练习过程中,遇到的一些疑惑。总结一下canvas.save()和canvas.restore(), canvas.beginPath()和canvas.closePath()怎么用。先把代码拉出来:


canvas.save()和canvas.restore()用法:


save() 和restore()主要在对画布进行转换(如:扭曲,旋转,缩放等)时很用作用。save()方法是保存画布当前状态的,restore()是取出画布 保存的状态。比如现在要对画布进行多个动作处理,第一个动作进行了缩放处理,如果在没有缩放处理前保存一下空白状态,那么再进行第二个动作新建时也会有第 一个动作缩放效果的影响。所以最好在对画布多个动作处理前,先canvas.save()保存一下空白状态或者你希望后面动作需要出现的状态,当前动作处 理完了再canvas.restore()一下,取出保存的空白状态保证后面的动作不受影响。


复制代码

 /**图形变形**/

    var c10 = document.getElementById("myCanvas10");

    var cre10 = c10.getContext("2d");

    cre10.fillStyle = "#eeeeff";

    cre10.fillRect(0, 0, 300, 300);

    cre10.save();

    cre10.fillStyle = "rgba(255, 0, 0, 0.1)";

    cre10.translate(50, 50);

    cre10.scale(0.5, 0.5);

    cre10.rotate(Math.PI/4);

    cre10.fillRect(0, 0, 100, 100);

    cre10.restore();

    cre10.save();

    cre10.fillStyle = "rgba(255, 0, 0, 0.2)";

    cre10.rotate(Math.PI/4);

    cre10.translate(100, 100);

    cre10.scale(0.5, 0.5);

    cre10.fillRect(0, 0, 100, 100);

    cre10.restore();

    cre10.save();

    cre10.fillStyle = "rgba(255, 0, 0, 0.5)";

    cre10.translate(130, 130);

    cre10.scale(0.5, 0.5);

    cre10.shadowOffsetX = 10;

    cre10.shadowOffsetY = 10;

    cre10.shadowColor = "rgba(100, 100, 100, 0.5)";

    cre10.shadowBlur = 1.5;

    cre10.fillRect(0, 0, 150, 150);

复制代码

本来效果是这样的:




如果去掉canvas.save()和canvas.restore()以后就是这样的:




canvas.beginPath()和canvas.closePath()用法:


这两个经常应用在绘制线条和圆弧中,可以成对用,也可以单独用,他们两个没有必然的联系。beginPath()是告诉浏览器我要开始划线了记录一下,这里作为一个起始点。closePath()是闭合路径,将结束焦点和起始点用直线链接起来。如果没有有closePath()结束的话,就不会有直线去链接结束点和起始点。


两个一起用是这样的:




没有用closePath()关闭线条:




但是往往不用closePath()方法还可以达到很好的效果:




下面是我用canvas画的小房子,很难看但是也要写出来:




复制代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>绘制图形</title>

    <style type="text/css">

        .canv{

            border:1px #d3d3d3 solid;

            margin:20px 10px;

        }

    </style>

</head>

<body>

<canvas width="300" height="300" id="canvas01"></canvas>


<script>

    window.onload = function(){

        drawHouse("canvas01");

    };

    //绿瓦红房子

    function drawHouse(id){

        var canv = document.getElementById(id);

        var canvas = canv.getContext("2d");

        canvas.fillStyle = "#eeeeff";

        canvas.fillRect(0, 0, 300, 300);

        console.info("第一步:空白,啥也没有");

        canvas.fillStyle = "green";

        canvas.beginPath();

        canvas.moveTo(150, 10);

        canvas.lineTo(270, 110);

        canvas.lineTo(30, 110);

        canvas.closePath();

        canvas.fill();

        canvas.fillStyle = "black";

        canvas.beginPath();

        canvas.moveTo(80, 68);

        canvas.lineTo(80, 20);

        canvas.lineTo(100, 20);

        canvas.lineTo(100, 52);

        canvas.closePath();

        canvas.fill();

        console.info("第二步:先盖绿色的房顶,黑色的烟囱");

        canvas.fillStyle = "red";

        canvas.beginPath();

        canvas.moveTo(50, 110);

        canvas.lineTo(50, 300);

        canvas.lineTo(250, 300);

        canvas.lineTo(250, 110);

        canvas.closePath();

        canvas.fill();

        console.info("第三步:刷红色的墙");

        canvas.fillStyle = "blue";

        canvas.beginPath();

        canvas.moveTo(80, 140);

        canvas.lineTo(80, 190);

        canvas.lineTo(130, 190);

        canvas.lineTo(130, 140);

        canvas.closePath();

        canvas.fill();

        canvas.strokeStyle = "white";

        canvas.beginPath();

        canvas.moveTo(105, 140);

        canvas.lineTo(105, 190);

        canvas.closePath();

        canvas.stroke();

        canvas.beginPath();

        canvas.moveTo(80, 165);

        canvas.lineTo(130, 165);

        canvas.closePath();

        canvas.stroke();

        console.info("第四步:开个蓝色窗户白色的格子");

        canvas.fillStyle = "white";

        canvas.beginPath();

        canvas.moveTo(150, 210);

        canvas.lineTo(150, 300);

        canvas.lineTo(210, 300);

        canvas.lineTo(210, 210);

        canvas.closePath();

        canvas.fill();

        canvas.fillStyle = "black";

        canvas.beginPath();

        canvas.arc(200, 255, 5, 0, Math.PI*2);

        canvas.closePath();

        canvas.fill();

        canvas.save();

        console.info("第五步:开一扇白色的门,黑把手");

    }


</script>

</body>

</html>


复制链接 网友评论 收藏本文 关闭此页
上一条: HTML5 Canvas学习笔记-处理鼠标事…  下一条: 自行制作网页的图标ICON
夜鹰教程网成立于2008年,目前已经运营了将近 13 年,发布了大量关于 html5/css3/C#/asp.net/java/python/nodejs/mongodb/sql server/android/javascript/mysql/mvc/easyui/vue/echarts原创教程。 我们一直都在坚持的是:认证负责、一丝不苟、以工匠的精神来打磨每一套教程,让读者感受到作者的用心。我们默默投入的时间,确保每一套教程都是一件作品,而不是呆板的文字和视频! 目前我们推出在线辅导班试运营,模式为一对一辅导,教学工具为QQ。我们的辅导学科包括 java 、android原生开发、webapp开发、商城开发、C#和asp.net开发,winform和物联网开发、web前端开发,但不仅限于此。 普通班针对的是国内学员,例如想打好基础的大学生、想转行的有志青年、想深入学习的程序员、想开发软件的初学者或者业余爱好者等。 就业办针对即将毕业上岗的大四学生,或者打算转行的初级开发工程师。 留学生班针对的是在欧美、加拿大、澳洲、日本、韩国、新加坡等地留学的中国学子,目的是让大家熟练地掌握编程技能,按时完成老师布置的作业,并能顺利地通过考试。 详细咨询QQ:1416759661   夜鹰教程网  基于角色的权限管理系统(c-s/b-s)。
  夜鹰教程网  基于nodejs的聊天室开发视频教程
  夜鹰教程网  Git分布式版本管理视频教程
  夜鹰教程网  MVC+EasyUI视频教程
  夜鹰教程网  在线考试系统视频教程
  夜鹰教程网  MongoDB视频教程。
  夜鹰教程网 Canvas视频教程
  夜鹰教程网 报表开发视频教程
  推荐教程/优惠活动

  热门服务/教程目录

  夜鹰教程网  新手必看,详细又全面。
  夜鹰教程网  购买教程  夜鹰教程网  在线支付-方便
  夜鹰教程网  担保交易-快捷安全   夜鹰教程网  闪电发货
  夜鹰教程网  电话和QQ随时可以联系我们。
  夜鹰教程网 不会的功能都可以找我们,按工作量收费。

客服电话:153 9760 0032

购买教程QQ:1416759661  
  热点推荐
XML Schema学习笔记(1)
XML Schema学习笔记(2)
C#对XML文档的操作
ASP操作XMLDOM
XML入门教程:分析XML
百度新闻开放协议XML文档制作方法…
XSL 语言
用RSS做五分钟一自动更新的网站
XML入门教程:文档类型声明
XML教程:通过一个例子来学习XML的…
XML节点相关知识
把XML文件绑定到列表控件
XML+XSLT+CSS+JQuery+WebService组…
XHTML头部Doctype声明必不可少!
历数Firefox2.0对XML处理的改进
  尊贵服务
夜鹰教程网 承接业务:软件开发 网站开发 网页设计 .Net+C#+VS2008+MSsql+Jquery+ExtJs全套高清完整版视频教程
  最近更新
金三银四跳槽季—前端面试汇总
Sublime常用插件汇总(全)
大前端学习路线
如何克服前端学习进步慢的问题
web前端常见基础问题
阿里前端面试经历(转载)
Web前端需要掌握技术汇总(转)
ESLint详解-让你的代码更加规范
通过userAgent适配 PC端和移动端网…
js操作DOM中需要注意的问题
Promise编程简介
Emmet语法和实例
新手所必须掌握的前端知识汇总
移动端视口的相关概念及其适配方案…
上传图片立即预览
  工具下载  需要远程协助? 

sql2008视频教程 c#视频教程

VIP服务:如果您的某个功能不会做,可以加我们QQ,给你做DEMO!

JQUERY  Asp.net教程

MVC视频教程  vs2012
.NET+sql开发
手机:15397600032 C#视频教程下载
微信小程序 vue.js高级实例视频教程

教程咨询QQ:1416759661


这篇文章不能解决你的问题?我们还有相关视频教程云课堂 全套前端开发工程师培训课程

微信号:yyjcw10000 QQ:1416759661  远程协助需要加QQ!

业务范围:视频教程|程序开发|在线解答|Demo制作|远程调试| 点击查看相关的视频教程

技术范围:全端开发/前端开发/webapp/web服务/接口开发/单片机/C#/java/node/sql server/mysql/mongodb/android/。 



关于我们 | 购买教程 | 网站建设 | 技术辅导 | 常见问题 | 联系我们 | 友情链接

夜鹰教程网 版权所有 www.yyjcw.com All rights reserved 备案号:蜀ICP备08011740号3