学习HTML5-Canvas

最新推荐文章于 2018-04-13 14:33:10 发布

Tomihaohao

最新推荐文章于 2018-04-13 14:33:10 发布

阅读量1.2k

点赞数

分类专栏： canvas

本文链接：https://blog.csdn.net/tomihaohao/article/details/8537841

版权

canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在经历一年的辛苦后终于把考研这个事整完了，考完后就感觉没得底，要说如果没上不失望那是不可能的，但是一切都不能改变了7分我已拿到,三分老天给不给就不知道了！
所以还是专注于技术和产品。 
------发牢骚
正文： 
  
  HTML5，貌似几年前就出来了大家也都在研究到目前为止全世界，中国的一些浏览器都在比浏览器跑分无论是PC还是Mobile，可见HTML5的重要性，但学习HTML5之前我个人认为应该学习至少一门后台语言ASP.NET, JSP是我推荐的因为在中国微软还是占一定的地位对于JSP我想说它也占有一定的地位（呵呵可能觉得是废话），在学习完一门服务器语言后就应该看看大学的计算机网络，这是常识也是你必须知道的，最后也是比较重要的英语要学好至少要会看文献，在这里感谢下考研害我读了90+120+40=250篇考研阅读，总算起到了点作用下面我会介绍些网站 
 
网站： 
  
  HTML5是新技术所以要走在中国的前面你就必须看看老外的东西首先是些前端技术： 
  
  
  tutorialzine点击打开链接学习CSS,JAVASCRIP，HTML5的. 
  
  
  fontello点击打开链接图标网站，还在为找不到图标而烦恼吗？ 
  
  
  foundation点击打开链接号称是世界上最好的响应式框架不知道是不是吹牛？ 
  
  
  tympanus点击打开链接同样是一款前端学习网站. 
  
  
  当然如果你是才开始学就去博客园啊W3SCHOOL逛逛吧！有许多写的很好的教程 
 
 Canvas 画布 
  
  HTML5的画布顾名思义在浏览器给你的白纸上画画只不过我们用的笔和颜料是JAVASCRIPT这门语言 
  
  
  首先浏览器必须支持CANVAS怎么判断呢？ 
  
  
  最简单的 
  
  
   <canvas> 
   你的浏览器不支持  //如果浏览器支持它就什么都不会显示，不支持就会显示这段文字，当然你也可以用脚本判断getContext是否存在 
   </canvas> 
   接下来我们就要教教我们的弱智二货计算机小朋友怎么画画，因为他太笨了，所以必须用他的思维去告诉他 
   从最简单的开始如何画一条简单的直线 
   首先我们必须告诉计算机（简单点计算机就叫他G）画布在哪里? 
   var canvas = document.getElementById('画布的ID');和身份证一样每一个元素都有自己的ID方便我们找到他们 
   var context =canvas.getContext('2d');因为CANVAS首先要获取上下文接着在上下文中执行这些动作最后将这些应用都上下文中 
   CANVAS是基于网格坐标的就是平面直角坐标系的第四象限只不过Y轴是反方向的(0,0)就是原点。 
   下面开始告诉G我们要划线了context.beginPath(); 
   context.moveTo(70,140);在哪开始画 
   context.lineTo(140,70);划到哪为止 
   注意此时并没有开始画出来只是G脑子里的思维 
   context.stroke();付出实践开始画; 
   最后还要加上这个方法的调用 
   window.addEventListener("load",方法名字,true).这个如果不懂可以自己BAIDU下; 
   那么到这里一条直线就画完了; 
   具体代码可以去W3SCHOOL里面很详细的 
  
  
  
  
   
   那么画出了直线当然可以画出不同的图形，二次曲线，圆，正方形等基本图形只不过是要调用一些方法 
  
  
   
   在这里给出一个链接 
  点击打开链接上面有例子也有讲解 
  
  
   
   如果对于DOM不了解的话建议先去简单了解下DOM。 
  
  
   
  
  
   
   接下来掌握了这些方法，也没说要记住只要依葫芦画瓢会用就行，你管他什么原理，什么参数的。 
  
  
   
   CANVAS如果只能画图这还远远不够 
  
  
   
   所以接下来介绍ANIMATION,（日漫什么的弱爆了，本人比较喜欢福禄娃你懂的，报告大王） 
  
  
   
   ANIMATION那么我们开始做一个地球绕太阳转月亮绕地球转的ANIMATION 
  
  
   
   下面介绍两个方法： 
  
  
   
   setInterval(animashape,500)如果没有什么交互的话用它最好了，这里animashape,500的意思是每办秒执行一次。 
  
  
   
   setTimeout(animashape,500)只会在预定的时间点执行操作 
  
  
  在做之前我们需要准备几张太阳地球和月亮的图片 
   
   
   
  
  
  
 
   随便画的将就吧。下面是代码键个HTML复制进去把上面的图片和HTML放在一个文件夹就可以了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
     <title>Canvas tutorial</title>
    <script type="text/javascript">
        var sun = new Image();
        var moon = new Image();
        var earth = new Image();
        function init() {
            sun.src = 'sun.png';
            moon.src = 'moon.png';
            earth.src = 'earth.png';
            setInterval(draw, 0.1);
        }

        function draw() {
            var ctx = document.getElementById('tutorial').getContext('2d');

            ctx.globalCompositeOperation = 'destination-over';
            ctx.clearRect(0, 0, 300, 300); // clear canvas

            ctx.fillStyle = 'rgba(0,0,0,0.4)';
            ctx.strokeStyle = 'rgba(0,153,255,0.4)';
            ctx.save();
            ctx.translate(150, 150);

            // Earth
            var time = new Date();
            ctx.rotate(((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds());
            ctx.translate(105, 0);
            ctx.drawImage(earth, -12, -12);

            // Moon
            ctx.save();
            ctx.rotate(((2 * Math.PI) / 6) * time.getSeconds() + ((2 * Math.PI) / 6000) * time.getMilliseconds());
            ctx.translate(0, 28.5);
            ctx.drawImage(moon, -3.5, -3.5);
            ctx.restore();

            ctx.restore();

            ctx.beginPath();
            ctx.arc(150, 150, 105, 0, Math.PI * 2, false); // Earth orbit
            ctx.stroke();

            ctx.drawImage(sun, 0, 0, 300, 300);
        }

        
        window.addEventListener("load", init, true);
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
</head>
 <body>
    <canvas id="tutorial" width="500" height="500">
    SORRY NOT SUPPORT
    </canvas>
  </body>
</html>

Tomihaohao

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
学习HTML5-Canvas

在经历一年的辛苦后终于把考研这个事整完了，考完后就感觉没得底，要说如果没上不失望那是不可能的，但是一切都不能改变了7分我已拿到,三分老天给不给就不知道了！所以还是专注于技术和产品。 ------发牢骚正文：HTML5，貌似几年前就出来了大家也都在研究到目前为止全世界，中国的一些浏览器都在比浏览器跑分无论是PC还是Mobile，可见HTML5的重要性，但学习HTML5之前我个人认为应该学习至少一门后
复制链接

扫一扫