纯 CSS 实现大量小块儿绘制10bet

来源:http://www.chinese-glasses.com 作者:Web前端 人气:188 发布时间:2020-03-24
摘要:时间: 2019-11-04阅读: 66标签: 绘制 简单了解canvas 现在做的项目是公司内部全部组要用的 viewer 库. Viewer需要的功能非常的多,其中的一个就是需要提供一些常用的绘图API功能,比如用户鼠

时间: 2019-11-04阅读: 66标签: 绘制

简单了解canvas

现在做的项目是公司内部全部组要用的 viewer 库. Viewer 需要的功能非常的多,其中的一个就是需要提供一些常用的绘图API功能, 比如用户鼠标移动画箭头,画圈圈,高光选中文本等等。

1.什么是canvas

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域,您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

版本支持:IE9以上
如果实在需要在IE9以前使用,可以查看 Exprorer Canvas Project和其他类似项目,通过插件来实现

10bet 1

浏览器兼容

注:canvas不是矢量图

挑战

2.canvas的作用

一些可能的用途,包括使用Canvas构造图形,动画,游戏和图片

当然也包括热工艺图。

目前遇到的挑战就是在 canvas, svg, dom + css 之间如何选择的问题,canvas 绘图的方案已经有了成品,我们可以直接拿过来添加到现有的 Viewer 上面。但是基于以下考虑,主要用哪种技术迟迟不能下定论。

3.我们为什么要使用canvas

性能,酷炫,还有什么好说的

1.只用一个 Canvas DOM 元素,降低 DOM 数量与渲染的复杂度,可以将原来 CPU 密集型变成 GPU 操作。
2.充分利用硬件资源的能力。
3.Canvas画布无论是 JavaScript & H5,还是native都有类似的 API。因此我可以把浏览器Canvas接口的反射到用native画布上,以此提高性能。

Canvas 纠结点:

canvas初识

1) 各部门合作问题,如果采用 canvas, 其他部门需要添加自定义图形操作的时候就需要他们了解 Canvas 开发 重绘到 Viewer 已有的 Canvas 上面。2) Canvas 会失去很多 Element 原生的属性,比如文字选中,aria标签, 事件等。3) Viewer 的文件可能会非常的大,并且可能会有成千上万个页面,每个页面管理自己的绘图。如果每个页面一个Canvas, 性能会非常差(采用了 View Virtualization 思想,只渲染视图需要的元素,这里是做了个极限假设)。如果所有的图形都绘制在一个Canvas上面,需要根据视图区域的页面属性重绘图形计算,开发成本会增加非常多。4)Canvas 只能用于最底层,否则会覆盖其他元素(Viewer上面的层非常多,需要绘图层能管理事件,同时不丢失其他层的事件)。

1.在web页面增加画布

在html页面中增加
<canvas id="hehe" width="600" height="200"></canvas>
注意:canvas宽高可以通过css设置,但是不建议,因为如果之前设置了标签样式,再设置css样式会把canvas图像扯变形

例如:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>JS Bin</title>
        <style>
          #hehe{
            background:#000;
              width:400px;
              height:300px;
          }
        </style>

      </head>
      <body>
        <canvas id="hehe" width="300" height='300'></canvas>
      </body>
      <script>
        let canvas = document.getElementById("hehe"),
             ctx = canvas.getContext("2d");

        ctx.fillStyle = "green";
        ctx.fillRect(10, 10, 100, 100);
      </script>
    </html>

10bet 2

扯变形

于是老大就给几天时间,让我们尽情地先试着用其他的方式画一下各种图形,比较一下优劣(最后,我们应该会几样技术结合起来用)。其中一个案例就是高光选中文本,后端传会传一堆需要高光块儿大小位置,前端画出高光部分。 像这种非常多小面积的绘图,Canvas是最合适不过的了,不过这几天时间就是看看有没有还有什么其他的方案。大概就长这样,高光是无数个小块儿。

2.如何看到画

除非你在画布上设置了内容,否则你是看不见它的,会默认为透明色

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>JS Bin</title>
        <style>
          #hehe{
            background:#000
          }
        </style>
      </head>
      <body>
        <canvas id="hehe" width="200" height='300'></canvas>
      </body>
    </html>

寻找方案

3.在画布上绘图

将画布放置在x=10,y=10的位置建立一个宽高100的矩形

10bet 3

Paste_Image.png

Canvas 画高光的方案已经有了,我们首先想到的就是每一个块儿给个 span 渲染,但因为需要高光的块儿可能会非常多,并且可能会是动态的。哪么这就涉及到 DOM 的频繁操作,性能非常不好。后来采用createDocumentFragment,添加到DOM,性能明显提升。

4.一个小小的画布测试
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>JS Bin</title>
        <style>
          #hehe{
            border:1px solid #000
          }
        </style>
        <script>
          window.onload = function(){
            var canvas = document.getElementById('hehe');
            //开始在画布绘制之前,我们必须遵循这个协议
            var context = canvas.getContext('2d');//提供一个可绘制的上下文
            context.fillStyle = 'blue';//默认填充色为黑色,改变默认填充色
            context.fillRect(10, 10, 100, 100); //x, y, 宽, 高
            //如果只想要轮廓context.strokeRect(10, 10, 100, 100)
          }
        </script>
      </head>
      <body>
        <canvas id="hehe" width="300" height:'300'></canvas>
      </body>
    </html>

我们打算画一个随机生成的圆饼
建立一个表单去控制canvas输出的图像
准备工作
MDN canvas API
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API
http://dev.w3.org/html5/2dcontext/

我当时有个非常大胆的想法,要是只用一个span,然后所有的块儿都添加成背景可不可以实现(考虑到现在的css3已经有了多背景重叠技术)。找路子的时候千万次觉得不可能,结果实现之后再返回去看,其实原理非常的简单。全部采用css, 用linear-gradient画块儿(采用linear-gradient, 是因为它可以背景重叠,如果有更好的方法欢迎指教),background-position, background-size分别给每个块儿定位,结束!性能当然是惊人的好,因为根本没有涉及到元素的增加删除,只是css重绘(Viewer 有大量消耗性能的scroll监听,操作等情况下都能无缝操作,Canvas 有非常微小地快闪)。这一试,仿佛大概了新世界,很多大量,简单的图形绘制完全可以尝试纯css实现,上代码。

1.首先,建立HTML
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>JS Bin</title>
        <style>
          #hehe{
            border:1px solid #000
          }
        </style>
        <script></script>
      </head>
      <body>
        <canvas id="hehe" width="300" height:'300'>
        如果你的浏览器不支持canvas,会不认识canvas标签,会直接识别canvas闭合标签内的文本元素
        </canvas>
        <form>

        </form>
      </body>
    </html>

Angular template

2.然后增加form
        <form>
          <p>
            <label for="backgroundColor">选择背景颜色</laberl>
            <select id="backgroundColor">
              <option value="white" selected="selected">白色</option>
              <option value="black">黑色</option>
            </select>
          </p>
          <p>
            <label for="shape">选择形状</laberl>
            <select id="shape">
              <option value="none" selected="selected">都不</option>
              <option value="circles">圆</option>
              <option value="squares">方块</option>
            </select>
          </p>
          <p>
            <label for="foregroundColor">选择文本颜色</laberl>
            <select id="foregroundColor">
              <option value="black" selected="selected">黑色</option>
              <option value="white">白色</option>
            </select>
          </p>
          <p>
            <input type="button" id="previewButton" value="预览">
          </p>
        </form>
span[style.background]="_background"[style.backgroundSize]="_backgroundSize"[style.backgroundPosition]="_backgroundPosition"/span
3.用js做计算

创建一个hehe.js文件

          window.onload = function() {
            var button = document.getElementById('previewButton')
            button.onclick = previewHandler;
          }
          function previewHandler() {
            var canvas = document.getElementById('hehe');
            var context = canvas.getContext('2d');

            var selectObj = document.getElementById('shape');
            var index = selectObj.selectedIndex;
            var shape = selectObj[index].value;
            if(shape === "squares"){
              for(var squares = 0; squares < 20; squares++){
                drawSquare(canvas, context)
              }
            }
          }

本文由10bet发布于Web前端,转载请注明出处:纯 CSS 实现大量小块儿绘制10bet

关键词:

频道精选

最火资讯