zoukankan      html  css  js  c++  java
  • 关于HTML5中的canvas标签的个个人理解

          HTML5 canvas这个玩意用通俗的话来讲就是一块用来画画的布,不过这不是普通的布,这是个类似于神笔马良的那个神笔一样神奇的东西,可以画出很多精湛美妙的东西。本文就展示两个基于canvas的炫酷效果,可以让我们对canvas的潜力有个比较直观的认识。

       个人感觉在canvas有很好的发展的空间,可以预计如果国家的网速如果无压力的跟上的话,不可质疑的说这将是HTML的天下。。因为在canvas中,他的想象无限思想有多远那么他的发展空间就有多远,当然前提是技术要过硬,当然是我的一个臆想,不过不可否认HTML的强大,不过目前最大的问题就是兼容性的问题,同时网速也是一大限制,

      作为刚刚接触HTML5的小白,制作的canvas ,他可以让canvas中的颜色不一样,同时,每次刷新都会不一样,个人有点小趣味,不断刷新感觉像时空隧道,想想还是可以干改变下下,效果应该不错,不多说代码如下:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            body{
               text-align: center;
            }
            canvas{
                border: 1px solid red;
    
            }
    
        </style>
    </head>
    <body>
        <p style="font-size: 30px;font-weight: bold">画布展示</p>
       <canvas width="500" height="500" id="ss"></canvas>
    
    </body>
    <script>
      colour()
    
        function colour(){
            var c=document.getElementById("ss");
            var cxt=c.getContext("2d");
            for(var i=0;i<25;i++){
                cxt.strokeStyle="rgb("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+""
                cxt.strokeRect(i*10,i*10,500-20*i,500-20*i);
            }
        }
    </script>
    
    </html>

       当然还有图片:

  • 相关阅读:
    docker镜像构建之docker commit(七)
    docker常用容器命令(五)
    docker常用镜像命令(四)
    如何查看systemctl启动服务的日志
    window server 2012 无法安装.NET framework 3.5 service pack 1
    SpringBoot第六篇-SpringBoot+Mybatis+SpringSecurity+JWT整合,开发工具IDea
    SpringBoot第五篇SpringSecurity 认证机制
    SpringBoot第四篇常见问题
    SpringBoot第三篇SpringBoo和Mybatis整合
    SpringBoot第二章拦截器
  • 原文地址:https://www.cnblogs.com/wangjunjunjiayuan/p/4641171.html
Copyright © 2011-2022 走看看