您的位置:68399皇家赌场 > 服务器租用 > 浅谈基于Canvas的手绘风格图形库Rough.js,canvasro

浅谈基于Canvas的手绘风格图形库Rough.js,canvasro

发布时间:2019-05-06 05:51编辑:服务器租用浏览(83)

    图片 1

    浅谈基于Canvas的手绘风格图形库Rough.js,canvasrough.js

    前言

    引进贰个依据Canvas的手绘风格图形JS库。

    Rough.js

    Rough.js是三个轻量的(大致捌k),基于Canvas的能够绘制出大概的手绘风格库。

    提供绘制线条、曲线、弧线、多边形、圆形和椭圆的基本功力量,同时帮衬绘制SVG路线。

    图片 2

    Github:

    安装

    下载链接:

    NPM

    npm install --save roughjs
    

    使用方法

    图片 3

    const rc = rough.canvas(document.getElementById('canvas'));
    rc.rectangle(10, 10, 200, 200); // x, y, width, height
    

    线条和椭圆

    图片 4

    rc.circle(80, 120, 50); // centerX, centerY, diameter
    rc.ellipse(300, 100, 150, 80); // centerX, centerY, width, height
    rc.line(80, 120, 300, 100); // x1, y1, x2, y2
    

    填充

    图片 5

    rc.circle(50, 50, 80, { fill: 'red' }); // fill with red hachure
    rc.rectangle(120, 15, 80, 80, { fill: 'red' });
    rc.circle(50, 150, 80, {
      fill: "rgb(10,150,10)",
      fillWeight: 3 // thicker lines for hachure
    });
    rc.rectangle(220, 15, 80, 80, {
      fill: 'red',
      hachureAngle: 60, // angle of hachure,
      hachureGap: 8
    });
    rc.rectangle(120, 105, 80, 80, {
      fill: 'rgba(255,0,200,0.2)',
      fillStyle: 'solid' // solid fill
    });
    

    草绘风格

    图片 6

    rc.rectangle(15, 15, 80, 80, { roughness: 0.5, fill: 'red' });
    rc.rectangle(120, 15, 80, 80, { roughness: 2.8, fill: 'blue' });
    rc.rectangle(220, 15, 80, 80, { bowing: 6, stroke: 'green', strokeWidth: 3 });
    

    SVG 路径

    图片 7

    rc.path('M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z', { fill: 'green' });
    rc.path('M230 80 A 45 45, 0, 1, 0, 275 125 L 275 80 Z', { fill: 'purple' });
    rc.path('M80 230 A 45 45, 0, 0, 1, 125 275 L 125 230 Z', { fill: 'red' });
    rc.path('M230 230 A 45 45, 0, 1, 1, 275 275 L 275 230 Z', { fill: 'blue' });
    

    简单的SVG路径

    图片 8

    结合Web Workers

    假定在网页中有import Workly 这些Web Workers库,RoughJS会自动将有着的操作转移至web workers,来释放UI主线程。这一个在行使RoughJS来创制复杂绘图(如地图)时13分有效。详细阅读有关内容 。

    <script src="https://cdn.jsdelivr.net/gh/pshihn/workly/dist/workly.min.js"></script>
    <script src="../../dist/rough.min.js"></script>
    

    图片 9

    例子

    API及文档

    如上正是本文的全部内容,希望对大家的读书抱有扶助,也希望大家多多匡助帮客之家。

    前言 推荐1个基于Canvas的手绘风格图形JS库。 Rough.js Rough.js是3个轻量的(差不离八k),基...

    壹.五 替代内容

      访问页面包车型客车时候,即便浏览器不帮忙Canvas成分,或然不帮助HTML五 Canvas API中的某个特点,那么开拓人士最棒提供1份取代代码。举例,开采人员能够经过一张代替图片或然局地表明性的文字告诉访问者,使用最新的浏览器能够赢得越来越的浏览效果。下述代码体现了怎样在Canvas中钦点代替文本,当浏览器不匡助Canvas的时候会显示这一个替代内容:

    1     <canvas>  2         为支持Canvas,请更新你的<a href="www.firefox.com">浏览器</a>!  3     </canvas>
    

      出了地点代码中的文本外,相同还是能够选择图片,不论是文本依旧图片都会在浏览器不帮衬Canvas成分的景况下显得出来。

    【Canvas元素的可访问性怎样】

      “提供替代图像或许替代文本引出了可访问性这些话题——很不满,那是HTML5Canvas规范中显明的短处。比方,未有一种原生方法能够自行为已插入到Canvas中的图片生成用于替换的文字表达。一样,也并未有原生方法可以更改代替文字以同盟由Canvas Text API动态变化的文字。可是已经有职业组初叶动手这上头的统一筹划了,让大家1块期待吗。”

    ——Peter

      关于如何管理可代表且可访问的Canvas内容,HTML伍设计者的脚下提出之1是采取前述的备用内容部分。然则,为了让Canvas的备用内容对荧屏阅读器和其余可访问性工具也有用处,它要能够帮忙键盘导航,即正是在浏览器扶助Canvas且可符合规律展现的景色下也是这般。固然一些浏览器已经扶助那项成效,但您不应该借助于浏览器来扶助用户的超过常规规必要。

      现阶段,大家引入使用页面上的独立部分来展现Canvas的代替内容。还有1个外加的成分,多数用户可能喜欢使用代替的控件可能期望壹种越来越好的体现格局,以便他们能够飞快领会和决定页面或行使。

      Canvas API的以后迭代中,也许会蕴藏于Canvas展现相关的可聚集的子区域以及它们中间的并行调节。然则,要是您的图像展示必要明显的相互行为,那么能够思量采纳SVG代替Canvas API。SVG也能用于绘制,而且它结合了浏览器的DOM。

    3.3、画直线

    演示代码:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Line</title>
        </head>
        <body>
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500">
                <line x1="0" y1="0" x2="500" y2="500" style="stroke:rgb(0,0,255);stroke-width:3" />
            </svg>
        </body>
    </html>
    

    参数:

    x壹 属性在 x 轴定义线条的上马
    y一 属性在 y 轴定义线条的初阶
    x2 属性在 x 轴定义线条的收尾
    y二 属性在 y 轴定义线条的终结

    运作结果:

    图片 10

    使用

    图片 11

    const rc = rough.canvas(document.getElementById('canvas'));
    rc.rectangle(10, 10, 200, 200); // x, y, width, height
    

    抑或采取SVG

    const rc = rough.svg(svg);
    let node = rc.rectangle(10, 10, 200, 200); // x, y, width, height
    svg.appendChild(node);
    

     

    1.1、创建canvas元素

    <canvas id="can" width="800"  height="600">不支持Canvas</canvas>

    以上代码制造了贰个大幅为800像素,中度为600像素的canvas。不提出使用CSS样式钦赐宽度和惊人。
    canvas标签中间的内容为代表呈现内容,当浏览器不支持canvas标签时会展现出来。

    开创了canvas成分后,要在canvas成分下边绘制图象,首先必须猎取canvas情状上下文:
    canvas.getContext(画布上制图的等级次序)
    2d: 表示2维
    experimental-webgl: 表示试验版3维
    webgl:表示3维

    Hello Wolrd示例代码:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>canvas绘图1</title>
        </head>
        <body>
            <canvas id="canvas1" width="800" height="600"></canvas>
            <script type="text/javascript">
               //获得画布元素
                var canvas1=document.getElementById("canvas1");
                //获得2维绘图的上下文
                var ctx=canvas1.getContext("2d");
    
                //设置线宽
                ctx.lineWidth=10;
                //设置线的颜色
                ctx.strokeStyle="blue";
    
                //将画笔移动到00点
                ctx.moveTo(0,0);
                //画线到800,600的坐标
                ctx.lineTo(800,600);
    
                //执行画线
                ctx.stroke();
            </script>
        </body>
    </html>
    

    运作效果:

    图片 12

    在页面上就显示了一条直线,另存为后就是一张背景透明的png图片。

    演习:画一个100X100的星型在画布正中心

    RoughJS能够而且在Canvas和SVG上中国人民解放军海军事工业程大学业作,那是3个非常实用的性状。


    三、SVG

    SVG可缩放矢量图形(Scalable Vector Graphics)是遵照可扩张标识语言(XML),用于描述贰维矢量图纸的一种图形格式。SVG是W3C("World Wide Web ConSortium" 即 " 国际互连网标准协会")在两千年5月制定的壹种新的2维矢量图形格式,也是明媒正娶中的互连网矢量图形规范。SVG严刻遵从XML语法,并用文本格式的描述性语言来说述图像内容,因而是一种和图像分辨率毫无干系的矢量图形格式。SVG 于 200三 年 一 月 1四 日成为 W3C 推荐标准。

    图片 13

    特点:

    一.随机放缩
    用户能够大肆缩放图像展现,而不会毁掉图像的清晰度、细节等。
    二.文本独立
    SVG图像中的文字独立于图像,文字保留可编写制定和可找寻的景况。也不会再有字体的界定,用户系统便是未有设置某一字体,也会看到和她俩创立时完全同样的镜头。
    3.不大文件
    完全来说,SVG文件比那么些GIF和JPEG格式的文件要小多数,由此下载也相当的慢。
    肆.超强显示效果
    SVG图像在显示屏上连接边缘清晰,它的清晰度适合任何显示器分辨率和打字与印刷分辨率。
    5.拔尖颜色调节
    SVG图像提供1个1600万种颜色的调色板,帮衬ICC颜色描述文件规范、PAJEROGB、线X填充、渐变和蒙版。
    陆.交互X和智能化。SVG面临的珍视难题一个是什么样和早已攻克十分重要市场份额的矢量图形格式Flash竞争的主题材料,另1个主题材料正是SVG的地面运维景况下的商家帮衬程度。

    浏览器帮忙:

    Internet Explorer9,火狐,谷歌Chrome,Opera和Safari都支持SVG。
    IE8和早先时期版本都亟需3个插件 - 如Adobe SVG浏览器,那是无需付费提供的。

    组成D3.js绘制柱形图

    图片 14

    <script src="rough.min.js"></script>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    
    <canvas id="canvas" width="960" height="500"></canvas>
    
    <script>
    var canvas = document.getElementById('canvas');
    const rc = rough.canvas(canvas, {
      options: {
        fill: "blue",
        roughness: 0.8,
        bowing: 0.7
      }
    });
    
    var context = canvas.getContext("2d");
    var margin = { top: 20, right: 20, bottom: 30, left: 40 },
      width = canvas.width - margin.left - margin.right,
      height = canvas.height - margin.top - margin.bottom;
    var x = d3.scaleBand()
      .rangeRound([0, width])
      .padding(0.1);
    var y = d3.scaleLinear()
      .rangeRound([height, 0]);
    context.translate(margin.left, margin.top);
    
    d3.tsv("data.tsv", function (d) {
      d.frequency =  d.frequency;
      return d;
    }, function (error, data) {
      if (error) throw error;
    
      x.domain(data.map(function (d) { return d.letter; }));
      y.domain([0, d3.max(data, function (d) { return d.frequency; })]);
    
      var yTickCount = 10,
        yTicks = y.ticks(yTickCount),
        yTickFormat = y.tickFormat(yTickCount, "%");
    
      data.forEach(function (d) {
        rc.rectangle(x(d.letter), y(d.frequency), x.bandwidth(), height - y(d.frequency));
      });
    
    
      context.beginPath();
      x.domain().forEach(function (d) {
        context.moveTo(x(d)   x.bandwidth() / 2, height);
        context.lineTo(x(d)   x.bandwidth() / 2, height   6);
      });
      context.strokeStyle = "black";
      context.stroke();
    
      context.textAlign = "center";
      context.textBaseline = "top";
      x.domain().forEach(function (d) {
        context.fillText(d, x(d)   x.bandwidth() / 2, height   6);
      });
    
      context.beginPath();
      yTicks.forEach(function (d) {
        context.moveTo(0, y(d)   0.5);
        context.lineTo(-6, y(d)   0.5);
      });
      context.strokeStyle = "black";
      context.stroke();
    
      context.textAlign = "right";
      context.textBaseline = "middle";
      yTicks.forEach(function (d) {
        context.fillText(yTickFormat(d), -9, y(d));
      });
    
      context.beginPath();
      context.moveTo(-6.5, 0   0.5);
      context.lineTo(0.5, 0   0.5);
      context.lineTo(0.5, height   0.5);
      context.lineTo(-6.5, height   0.5);
      context.strokeStyle = "black";
      context.stroke();
    
      context.save();
      context.rotate(-Math.PI / 2);
      context.textAlign = "right";
      context.textBaseline = "top";
      context.font = "bold 10px sans-serif";
      context.fillText("Frequency", -10, 10);
      context.restore();
    });
    </script>
    

    翻开演示

    二.7  填充矩形区域

      每棵树都有2个身强体壮的树枝。大家在原始图形中为树干预留了足足的长空。如下列代码所示,通过fillRect函数能够画出树干:

    1             context.fillStyle = "#663300";  // 将填充色设置为棕色  2             context.fillRect(-5, -50, 10, 50);  // 填充用作树干的矩形区域
    

      在地点的代码中,再一次将中绿作为填充色。不过跟上次不均等的是,大家不用lineTo功用显示画树干的边角,而是利用fillRect一步到位画出1切树干。调用fillRect并设置x、y四个岗位参数和幅度、中度五个分寸参数,随后,Canvas会霎时采用当前的体制进行填写。

      固然示例中从不利用,但与之互为表里城门失火的函数还有strokeRect和clearRect。strokeRect的成效是遵照给出的职务和坐标画出矩形的概略,clearRect的职能是清除矩形区域内的富有剧情并将它过来到开端状态,即透明色。

    【Canvas动画】

      “在HTML伍 Canvas API中,canvas的铲除矩形作用是创设动画和玩耍的核心功能。通过反复绘制和解决canvas片段,就恐怕完结动画效果,互联英特网有诸多如此的例证。然则,假使指望制造运转起来相比较流利的卡通片,就供给利用剪裁(clipping)功用了,有非常大希望还亟需一回缓存canvas,以便最小化由于反复的清除动作而致使的镜头闪烁。就算动画不是本篇的重中之重,不过后边的三.2中,介绍了有的选取HTML伍为页面增添动画功效的晋升。”

    ——Brian

      填充树干后的完整代码如下:

    图片 15图片 16

     1 <!DOCTYPE html>   2    3 <html>   4 <head>   5     <meta charset="utf-8" />   6     <title>孤影'Blog http://www.cnblogs.com/LonelyShadow</title>   7 </head>   8 <body>   9     <canvas id="trails" style="border:1px solid black;" width="400" height="300"></canvas>  10   11     <script>  12         // 用于绘制树冠轮廓的函数  13         function CreateCanopyPath(context) {  14             context.beginPath();    // 绘制树冠  15   16             context.moveTo(-25, -50);  17             context.lineTo(-10, -80);  18             context.lineTo(-20, -80);  19             context.lineTo(-5, -110);  20             context.lineTo(-15, -110);  21   22             context.lineTo(0, -140);    // 树的顶点  23   24             context.lineTo(15, -110);  25             context.lineTo(5, -110);  26             context.lineTo(20, -80);  27             context.lineTo(10, -80);  28             context.lineTo(25, -50);  29   30             context.lineTo(25, -50);  31   32  
    

    二、WebGL

    WebGL(全写Web Graphics Library)是一种3D绘Logo准,这种绘图本领规范允许把JavaScript和OpenGL ES 二.0组合在协同,通过增添OpenGL ES 2.0的1个JavaScript绑定,WebGL可以为HTML伍Canvas提供硬件3D加快渲染,那样Web开拓职员就能够依赖系统显卡来在浏览器里更流畅地突显3D场景和模型了,还是可以创建复杂的领航和数目视觉化。显明,WebGL技艺标准免去了支出网页专用渲染插件的辛劳,可被用于创造具备复杂3D结构的网址页面,乃至足以用来规划3D网络游戏之类。

    WebGL完美地缓和了现存的Web交互式三个维度动画的两个难题:

    第一,它通过HTML脚本作者达成Web交互式三维动画的炮制,不供给任何浏览器插件帮衬;

    其次,它选拔底层的图形硬件加速功效举行的图形渲染,是经过统壹的、标准的、跨平台的OpenGL接口达成的。

    通俗说WebGL中canvas绘图中的3D版本。因为原生的WebGL很复杂,大家经常会利用一些3方的库,如three.js等,这么些库繁多用以HTML5玩耍支付。

    图片 17

    Three.js的演示代码:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Three.js</title>
        </head>
        <body>
            <script src="js/three.min.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
                var scene = new THREE.Scene();
    
                var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    
                var renderer = new THREE.WebGLRenderer();
    
                renderer.setSize(window.innerWidth, window.innerHeight);
    
                document.body.appendChild(renderer.domElement);
                var geometry = new THREE.CubeGeometry(1, 1, 1);
                var material = new THREE.MeshBasicMaterial({
                    color: 0x0000ff
                });
                var cube = new THREE.Mesh(geometry, material);
                scene.add(cube);
                camera.position.z = 5;
    
                function render() {
                    requestAnimationFrame(render);
                    cube.rotation.x  = 0.1;
                    cube.rotation.y  = 0.1;
                    renderer.render(scene, camera);
                }
                render();
            </script>
        </body>
    
    </html>
    

    three.js示例运维结果:

    图片 18

    RoughJS是八个轻量级的JavaScript图形库(压缩后约玖KB),能够令你在网页上制图版画风格、手绘样式般的图形。RoughJS定义了绘图直线,曲线,圆弧,多边形,圆和椭圆的图元,同时它还辅助绘制SVG路径。

     

    一.陆、绘制文字

    context.fillText(text,x,y,[maxWidth])

    在canvas上填写文字,text表示必要绘制的文字,x,y分别代表绘制在canvas上的横,纵坐标,最终一个参数可选,表示呈现文字的最大开间,幸免文字呈现溢出。

    context.strokeText(text,x,y,[maxWidth])

    在canvas上描边文字,参数的意义同fillText
    动用context.font属性设置字体
    context.font='italic bolder 48px 黑体';

    示范代码:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>绘制文字</title>
        </head>
        <body>
            <canvas id="canvas1" width="600" height="600"></canvas>
            <img src="img/apple.png" id="apple" hidden="hidden" />
            <script type="text/javascript">
               //必须当页面中的图片资源加载成功
                window.onload = function() {
                    //获得画布元素
                    var canvas1 = document.getElementById("canvas1");
                    //获得2维绘图的上下文
                    var ctx = canvas1.getContext("2d");
    
                    //设置线宽
                    ctx.lineWidth = 1;
                    //设置线的颜色
                    ctx.strokeStyle = "dodgerblue";
                    ctx.moveTo(0,0);
                    ctx.strokeRect(0,0,600,600);
    
                    //绘制文字
                    //描边
                    ctx.font="50px microsoft yahei";
                    ctx.strokeText("Hello Zhangguo",20,100);
                    //填充
                    ctx.fillStyle=
                    ctx.fillText("Hello Zhangguo",20,200);
                }
    
            </script>
        </body>
    
    </html>
    

    运作结果:

    图片 19

    例子

    您能够在其壹页面中观察有的RoughJS使用例子。

    贰.六  填充样式

      正如你所期待的那么,能影响canvas的图样外观的决不仅描边,另二个常用语修改图形的点子是内定怎么样填充其路线和子路径,如下列代码所示,用可爱的浅湖蓝填充树冠有多么简单:

    图片 20图片 21

    1             // 将填充色设置为绿色并填充树冠  2             context.fillStyle = "#339900";  3             context.fill();
    

    采纳填充样式

      首先,大家将fillStyle属性设置成合适的水彩。(在末端,大家将见到还能使用渐变色大概图案填充)然后,只要调用context的fill函数就可以让canvas对当前图形中全部的密闭路线内部的像素点进行填充,如图:

    图片 22

      填充后的1体化代码如下:

    图片 23图片 24

     1 <!DOCTYPE html>   2    3 <html>   4 <head>   5     <meta charset="utf-8" />   6     <title>孤影'Blog http://www.cnblogs.com/LonelyShadow</title>   7 </head>   8 <body>   9     <canvas id="trails" style="border:1px solid black;" width="400" height="300"></canvas>  10   11     <script>  12         // 用于绘制树冠轮廓的函数  13         function CreateCanopyPath(context) {  14             context.beginPath();    // 绘制树冠  15   16             context.moveTo(-25, -50);  17             context.lineTo(-10, -80);  18             context.lineTo(-20, -80);  19             context.lineTo(-5, -110);  20             context.lineTo(-15, -110);  21   22             context.lineTo(0, -140);    // 树的顶点  23   24             context.lineTo(15, -110);  25             context.lineTo(5, -110);  26             context.lineTo(20, -80);  27             context.lineTo(10, -80);  28             context.lineTo(25, -50);  29   30             context.lineTo(25, -50);  31   32             context.closePath();    // 连接起点,闭合路径  33         }  34   35         // 在Canvas上画树的函数  36         function DrawTrails() {  37             var canvas = document.getElementById("trails");  38             var context = canvas.getContext("2d");  39   40             context.save();  41             context.translate(130, 250);  42             CreateCanopyPath(context);  // 创建表现树冠的路径  43               44             context.lineWidth = 4;  // 加宽线条  45             context.lineJoin = "round"; // 平滑路径的结合点  46             context.strokeStyle = "#663300";    // 将颜色改成棕色  47   48             // 将填充色设置为绿色并填充树冠  49             context.fillStyle = "#339900";  50             context.fill();  51   52             //绘制当前路径  53             context.stroke();     54             context.restore();  55         }  56         window.addEventListener("load", DrawTrails, true);  57     </script>  58 </body>  59 </html>
    

    使用填充后的完全代码

      由于大家是先描边后填充,由此填充会覆盖一部分描边路线。我们实例中的路线是4像素宽,那几个上升的幅度是沿路线线居中对齐的,而填写是把路子概况内部装有像素整体填充,所以会覆盖描边路线的八分之四。倘若指望观察完整的描边路线,能够在绘制路线(调用context.stroke())此前填充(调用context.fill())。

     

     

     

    1.四、绘制圆弧

    context.arc(x,y,radius,startAngle,endAngle,anticlockwise)

    arc方法用来绘制一段圆弧路线,以(x,y)圆心地点radius为半径、startAngle为起首弧度、endAngle为休息弧度来,而在画圆弧时的旋转方向则由最终一个参数 anticlockwise 来钦赐,即便为 true 正是逆时针,false 则为顺时针,Math.PI * 贰 刚好为7日。

    示范代码:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>绘制圆弧</title>
        </head>
        <body>
            <canvas id="canvas1" width="600" height="600"></canvas>
            <script type="text/javascript">
                //获得画布元素
                var canvas1 = document.getElementById("canvas1");
                //获得2维绘图的上下文
                var ctx = canvas1.getContext("2d");
    
                //设置线宽
                ctx.lineWidth = 10;
                //设置线的颜色
                ctx.strokeStyle ="dodgerblue";
    
                //画一段圆弧,300,300是圆心,200是半径,0是超始角度,Math.PI是结束角度,是否逆时钟
                ctx.arc(300,300,200,0,Math.PI,false);
                //闭合
                ctx.closePath();
                ctx.stroke();
                ctx.beginPath();
                ctx.fillStyle="aquamarine";
                ctx.arc(300,300,100,0,Math.PI*2,false);
                ctx.fill();
            </script>
        </body>
    </html>
    

    运作效果:

     图片 25

    练习:

    a、模拟石英钟的时,分,秒

    b、模拟水波,二个浅湖蓝的显示器,多少个从着力随机发生彩色的圈不断的拓宽,接触到显示屏截至。

    简短的主干图形绘制

    图片 26

    <canvas id="canvas" width="800" height="600"></canvas>
    
    <script>
    const rc = rough.canvas(document.getElementById('canvas'));
    
    //line and rectangle
    rc.rectangle(10, 10, 100, 100);
    rc.rectangle(140, 10, 100, 100, {
      fill: 'rgba(255,0,0,0.2)',
      fillStyle: 'solid',
      roughness: 2
    });
    rc.rectangle(10, 130, 100, 100, {
      fill: 'red',
      stroke: 'blue',
      hachureAngle: 60,
      hachureGap: 10,
      fillWeight: 5,
      strokeWidth: 5
    });
    
    // ellipse and circle
    rc.ellipse(350, 50, 150, 80);
    rc.ellipse(610, 50, 150, 80, {
      fill: 'blue'
    });
    rc.circle(480, 50, 80, {
      stroke: 'red', strokeWidth: 2,
      fill: 'rgba(0,255,0,0.3)', fillStyle: 'solid'
    });
    
    //overlapping circles
    rc.circle(480, 150, 80, {
      stroke: 'red', strokeWidth: 4,
      fill: 'rgba(0,255,0,1)', fillWeight: 4, hachureGap: 6
    });
    rc.circle(530, 150, 80, {
      stroke: 'blue', strokeWidth: 4,
      fill: 'rgba(255,255,0,1)', fillWeight: 4, hachureGap: 6
    });
    
    // linearPath and polygon
    rc.linearPath([[690, 10], [790, 20], [750, 120], [690, 100]], {
      roughness: 0.7,
      stroke: 'red', strokeWidth: 4
    });
    rc.polygon([[690, 130], [790, 140], [750, 240], [690, 220]]);
    rc.polygon([[690, 250], [790, 260], [750, 360], [690, 340]], {
      stroke: 'red', strokeWidth: 4,
      fill: 'rgba(0,0,255,0.2)', fillStyle: 'solid'
    });
    rc.polygon([[690, 370], [790, 385], [750, 480], [690, 460]], {
      stroke: 'red',
      hachureAngle: 65,
      fill: 'rgba(0,0,255,0.6)'
    });
    
    // arcs
    rc.arc(350, 200, 200, 180, Math.PI, Math.PI * 1.6);
    rc.arc(350, 300, 200, 180, Math.PI, Math.PI * 1.6, true);
    rc.arc(350, 300, 200, 180, 0, Math.PI / 2, true, {
      stroke: 'red', strokeWidth: 4,
      fill: 'rgba(255,255,0,0.4)', fillStyle: 'solid'
    });
    rc.arc(350, 300, 200, 180, Math.PI / 2, Math.PI, true, {
      stroke: 'blue', strokeWidth: 2,
      fill: 'rgba(255,0,255,0.4)'
    });
    
    // draw sine curve
    let points = [];
    for (let i = 0; i < 20; i  ) {
      // 4pi - 400px
      let x = (400 / 20) * i   10;
      let xdeg = (Math.PI / 100) * x;
      let y = Math.round(Math.sin(xdeg) * 90)   500;
      points.push([x, y]);
    }
    rc.curve(points, {
      roughness: 1.2, stroke: 'red', strokeWidth: 3
    });
    </script>
    

    查看演示

    1.1 历史

      Canvas的定义最初是由苹果集团建议的,用于在Mac OS X WebKit中创立调整板部件(Dashboard Widget)。在Canvas出现在此之前,开垦人员若要在浏览器中使用绘图API,只好使用Adobe的Flash和SVG(Scalable Vector Graphics,可伸缩矢量图形)插件,也许唯有IE才帮忙的VML(Vector 马克up Language,矢量标识语言),以及任何一些新奇的Javascript手艺。

      固然大家要在未有Canvas成分的标准化下绘制一条对角线——听起来仿佛一点也不细略,但实际上倘使未有一套二维绘图API的话,那会是1项十一分复杂的劳作。HTML五Canvas能够提供这样的法力,对浏览器端来讲此意义拾叁分有用,因而Canvas被纳入了HTML五号正楷字经,

      伊始,苹果集团曾暗中表示可能会为WHATWG(Web Hypertext Application Technology Working Group,Web超文本应用技工组)草案中的Canvas规范申请知识产权,那在当时引起了部分Web标准化追随者的青睐。可是,苹果公司最终依旧依据W3C免版税专利权许可条目公开了其专利。

    【SVG和Canvas对比】

      “Canvas本质上是3个位图画布,其上绘制的图纸是不行缩放的,不可能像SVG图像那样能够被推广减弱。其余,用Canvas绘制出来的对象不属于页面DOM结构依旧其余命名空间——那点被感到是一个败笔。SVG图像却足以在毫无的分辨率下流畅地缩放,并且援救单击检查测试(能检查实验到鼠标单击了图像上的哪位点)。

      既然如此,为啥WHATWG的HatML伍行业内部不适用SVG呢?就算Canvas有综上可得的供应不能满足需求,但HTML Canvas API有双方面有事能够弥补:首先,不须求讲所绘制图像中的各种图元当做对象存款和储蓄,由此实践性能分外好;其次,在其他编制程序语言现成的神奇贰维绘图API的底子上贯彻Canvas API相对来说相比轻巧。究竟,2鸟在林不比一鸟在手。”

    ——Peter

     

     

    壹.5、绘制图像

    context.drawImage(image,x,y)

    把image图像绘制到画布上x,y坐标地点。

    context.drawImage(image,x,y,w,h)

    把image图像绘制到画布上x,y坐标地点,图像的小幅是w,中度是h。

    context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
    截取image图像以sx,sy为左上角坐标,宽度为sw,中度为sh的一块矩形区域绘制到画布上以dx,dy坐标地点,图像宽度是dw,中度是dh。
    其中image可以是htmlImageElement元素,htmlcanvasElement元素,htmlVideoElement元素

    演示代码:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>绘制图像</title>
        </head>
        <body>
            <canvas id="canvas1" width="600" height="600"></canvas>
            <img src="img/apple.png" id="apple" hidden="hidden" />
            <script type="text/javascript">
               //必须当页面中的图片资源加载成功
                window.onload = function() {
                    //获得画布元素
                    var canvas1 = document.getElementById("canvas1");
                    //获得2维绘图的上下文
                    var ctx = canvas1.getContext("2d");
    
                    //设置线宽
                    ctx.lineWidth = 10;
                    //设置线的颜色
                    ctx.strokeStyle = "dodgerblue";
                    ctx.moveTo(0,0);
                    ctx.strokeRect(0,0,600,600);
    
                    //图片
                    var apple = document.getElementById("apple");
                    //将图像绘制到画布的,图片的左上角
                    ctx.drawImage(apple, 300-52, 300-63);
                }
            </script>
        </body>
    
    </html>
    

    运维效果:

    图片 27

    绘制线和椭圆

    图片 28

    rc.circle(80, 120, 50); // centerX, centerY, diameter
    rc.ellipse(300, 100, 150, 80); // centerX, centerY, width, height
    rc.line(80, 120, 300, 100); // x1, y1, x2, y2
    

      关于HTML5 Canvas API完全能够写一本书(还不会是壹本很薄的书),所以在那边大家将商讨API中如何大家感觉最常用的功能。

    一.7、随机颜色与轻易动画

    第二构成随机格局与电磁照看计时器、石英钟完成轻易的动画片。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>随机颜色与简单动画</title>
        </head>
        <body>
            <canvas id="canvas1" width="1000" height="650"></canvas>
            <img src="img/apple.png" id="apple" hidden="hidden" />
            <script type="text/javascript">
                var magicCircle = {
                    randomColor: function() {
                        return "#"   parseInt(Math.random() * 16777216).toString(16);
                    },
                    getNum: function(min, max) {
                        return parseInt(Math.random() * (max - min))   min;
                    },
                    r: 10,
                    run: function() {
                        //获得画布元素
                        this.canvas1 = document.getElementById("canvas1");
                        //获得2维绘图的上下文
                        this.ctx = this.canvas1.getContext("2d");
                        //运行
                        setInterval(this.draw, 100);
                        this.bindEvent();
                    },
                    draw: function() {
                        magicCircle.ctx.beginPath();
                        magicCircle.ctx.lineWidth = magicCircle.getNum(1,10);
                        magicCircle.ctx.strokeStyle = magicCircle.randomColor();
                        magicCircle.ctx.arc(magicCircle.getNum(1,1000), magicCircle.getNum(1,600), magicCircle.r, 0, Math.PI * 2);
                        magicCircle.ctx.stroke();
                        magicCircle.r  = 10;
                        if(magicCircle.r > 300) magicCircle.r = 10;
                    },
                    bindEvent:function()
                    {
                        this.canvas1.onmousemove=function(e){
                            magicCircle.ctx.lineWidth = magicCircle.getNum(1,10);
                            magicCircle.ctx.strokeStyle = magicCircle.randomColor();
                            magicCircle.ctx.arc(e.clientX, e.clientY, magicCircle.r, 0, Math.PI * 2);
                            magicCircle.ctx.stroke();
                            magicCircle.r  = 10;
                            if(magicCircle.r > 300) magicCircle.r = 10;
                        }
                    }
                };
    
                magicCircle.run();
            </script>
        </body>
    
    </html>
    

    运作效果:

    图片 29

    使用Web Workers

    尽管你的网页中程导弹入了Workly(大小约一k),RoughJS自动将兼具拍卖专业抛给Web Worker,同时释放UI主线程。有了Web Worker的支撑,在利用RoughJs(如地图)创造复杂图形时,就可怜有效了。你能够在这里开卷更加多相关音信。

    <script src="https://cdn.jsdelivr.net/gh/pshihn/workly/dist/workly.min.js"></script>
    <script src="../../dist/rough.min.js"></script>
    

    图片 30

    你可以在这里看来选拔RoughJS生成地图的事例。

    1.6 CSS 和 Canvas

      同大多数HTML成分同样,Canvas元素也得以因此采用CSS的点子来充实边框、设置内边距、外边距等,而且部分CSS属性仍是可以被Canvas内的要素承袭。举个例子字体样式,在Canvas内增多的文字,其样式暗许可Canvas成分本身是同1的。

      其它,在Canvas中为Context设置属性同样要服从CSS语法。举例,对context应用颜色和字体样式,跟在别的HTML和CSS文书档案中应用的语法完全壹致。

     

     

     

    3.4、画椭圆

    示范代码:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>椭圆</title>
        </head>
        <body>
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" hidden="500">
                <ellipse cx="300" cy="80" rx="100" ry="50" style="fill:yellow;stroke:dodgerblue;stroke-width:5" />
            </svg>
        </body>
    </html>
    

    参数:

    CX属性定义的椭圆中央的x坐标
    CY属性定义的椭圆核心的y坐标
    奥迪Q5X属性定义的水平半径
    凯雷德Y属性定义的垂直半径

    运转结果:

    图片 31

    本文由68399皇家赌场发布于服务器租用,转载请注明出处:浅谈基于Canvas的手绘风格图形库Rough.js,canvasro

    关键词: 68399皇家赌场 HTML5 前端