什么样使用canvas绘图

canvas api

2016/01/11 · HTML5 · Canvas

原来的小讲出处： 韩子迟   

我们好，笔者是IT修真院吉达分院第6期的上学的小孩子先小波，热气腾腾枚正直纯洁善良的WEB前端技术员。

HTML5新增加基本工具——canvas

绘图在此以前的预备干活：

1.在body中参与canvas标签，设置它的id、width、height，当然也足以动态设置它的宽高。

 <canvas id="mycanvas" width="1200" height="500"></canvas>

2.收获canvas对象的上下文obj.getContext(par),par参数为“2d”,近年来canvas只帮忙二维效果。

var ctx = document.getElementById("mycanvas").getContext("2d");

这么你便有了一张1200*500的“画布”清劲风度翩翩支名称叫“ctx”的画笔，接下去大家从部分最简便易行的图纸最先绘制。

示范代码如下：

复制代码

var ctx=document.getElementById("container").getContext("2d");

    ctx.fillStyle="blue";

    ctx.fillRect(10,10,200,100);

    ctx.lineWidth=10;

    ctx.strokeStyle="red";

    ctx.strokeRect(300,10,200,100);

复制代码

里面fill表示填充，stroke代表仅绘制边框。

同理fillRect代表诚挚矩形，strokeRect表示矩形边框，他们都有四个参数：x,y,w,h 分别为横纵坐标、宽、高。

fillStyle表示填充样式，strokeStyle表示边框样式。

lineWidth表示线宽。

亟待在意的是，设置样式等应写在绘制图形在此之前，不然样式会渲染不上。

在绘制多少个图形时，应该在绘制一个图纸从前开绘制路径，定制完毕后关闭绘制路线并绘制订制好的图形。比方上例标准写法应该为：

复制代码

   var ctx=document.getElementById("container").getContext("2d");

    ctx.beginPath();

    ctx.fillStyle="blue";

    ctx.fillRect(10,10,200,100);

    ctx.closePath();

    ctx.stroke();

    ctx.beginPath();

    ctx.lineWidth=10;

    ctx.strokeStyle="red";

    ctx.strokeRect(300,10,200,100);

    ctx.closePath();

    ctx.stroke();

复制代码

beginPath()开启绘制路径，close帕特h()闭合绘制路线，stroke()绘制订制图形。在随后的练习中一定要养成习于旧贯，不然当绘制线条时就能发觉由于未密封绘制路线所出现的线条错连。

绘图线条：

演示代码如下：

复制代码

var ctx=document.getElementById("container").getContext("2d");

    ctx.beginPath();

    ctx.moveTo(400,100);

    ctx.lineTo(300,200);

    ctx.lineTo(350,200);

    ctx.lineTo(250,300);

    ctx.lineTo(400,300);

    ctx.closePath();

    ctx.stroke();

复制代码

在那之中，moveTo表示将画笔移动到有些坐标上，lineTo指以画笔落点开头画到哪个岗位。此番大家想要画三个总结的树冠   

足见，这里大家只画了大要上。(400，100)地点为树顶，(400，300)地方为树底中部，线条自动关闭正是大家关闭绘制路径所发生的成效。

接下去大家把另二分之一画完，并给那棵树填充上深绿：

复制代码

 var ctx=document.getElementById("container").getContext("2d");

    ctx.beginPath();

    ctx.fillStyle="green";

    ctx.moveTo(400,100);

    ctx.lineTo(300,200);

    ctx.lineTo(350,200);

    ctx.lineTo(250,300);

    ctx.lineTo(400,300);

    ctx.lineTo(550,300);

    ctx.lineTo(450,200);

    ctx.lineTo(500,200);

    ctx.lineTo(400,100);

    ctx.fill();

    ctx.closePath();

    ctx.stroke();

复制代码

注意写在最终的fill()为填充样式：

绘制圆形：

亲自过问代码：

 var ctx=document.getElementById("container").getContext("2d");

    ctx.beginPath();

    ctx.arc(200,200,100,0,360*Math.PI/180,true);

    ctx.closePath();

    ctx.stroke();

arc(x,y,r,starta,enda,anti);参数分别代表：圆心横、纵坐标，半径、起初角（需转变到弧度值）、终止角、绘制方向。

用canvas绘制圆，假设你是刚接触一定感觉很郁结，因为它的参数有看不尽都是相反的。这里为了我们不纠缠，小编多罗嗦几句。

起、止角的企图与大家数学上的角度计算不一样，数学中的角度逆时针为正，而那边的起止角是以顺时针为正，也便是当你起角设为0度，止角设为120度。它是从左边水平地点向下旋转总结角度。

再有就是绘制方向上，true代表逆时针，false代表顺时针。晕了的校友看下边包车型地铁例证：

 ctx.arc(200,200,100,0,120*Math.PI/180,true);

设起角为0，止角120。按数学上的思索应该是三个紧跟于半圆的上半边的弧，而结果：

此处true表示逆时针绘制，所以绘出了的图片大于半圆。若改为false：

那时顺时针绘制出的图片小于半圆，这里大家应该也得以通晓arc的角度总括方向是与数学相反的。要想画多少个位居上方的小半圆？止角设为-120度，绘制方向true就能够。

此地罗嗦这么多便是可望刚接触的相爱的人们少走弯路，不像大家琢磨半天。

制图阴影：

复制代码

 var ctx=document.getElementById("container").getContext("2d");

    ctx.beginPath();

    ctx.fillStyle="gray";

    ctx.shadowOffsetX=5;

    ctx.shadowOffsetY=5;

    ctx.shadowColor="gold";

    ctx.shadowBlur=5;

    ctx.fillRect(10,10,100,100);

    ctx.closePath();

    ctx.stroke();

复制代码

shadowOffsetX、shadowOffsetY表示阴影横、纵向偏移量，shadowColor表示阴影颜色，shadowBlur代表模糊等第。

鉴于在头里CSS3相关博文中已经讲了比较多关于阴影的事物了，这里就一笔带过。依旧亟待专心的是，先安装样式，最后再绘制矩形，顺序反了功效会渲染不上。

制图渐变：

线性渐变：

复制代码

   ctx.beginPath();

   var Color=ctx.createLinearGradient(500,500,500,0);

   Color.addColorStop(0.3,"orange");

   Color.addColorStop(0.5,"yellow");

   Color.addColorStop(1,"gray");

   ctx.fillStyle=Color;

   ctx.fillRect(0,0,1200,500);

   ctx.closePath();

   ctx.stroke();

复制代码

写法为：将ctx.createLinearGradient()赋值给如日中天颜色变量，颜色变量能够加上八个渐变颜色，addColorStop其共有三个参数，1.偏移量（0-1）2.颜色。最终将颜色变量赋给fillStyle。

createLinearGradient()共有三个参数：1、2表示起头面，3、4象征终于面。

通向渐变：

复制代码

   ctx.beginPath();

        ctx.arc(500,300,100,0,360*Math.PI/180,true);

        var Color=ctx.createRadialGradient(500,300,30,500,300,100);

        Color.addColorStop(0,"red");

        Color.addColorStop(0.5,"orange");

        Color.addColorStop(1,"yellow");

        ctx.fillStyle=Color;

        ctx.fill();

        ctx.closePath();

        ctx.stroke();

复制代码

与线性渐变比较相似，分歧的是其名称为createRadialGradient()中有八个参数：1、2.渐变初叶圆的圆心坐标，3.渐变开始圆的半径，4、5.渐变利落圆的圆心坐标，6.渐变利落圆的半径。

绘制文字：

复制代码

ctx.beginPath();

ctx.strokeStyle="gold";

ctx.fillStyle="bule";

ctx.font="50px 微软雅黑";

ctx.strokeText("hello world！",700,200);

ctx.font="30px 幼圆";

ctx.fillText("hello kitty？",700,300);

ctx.fill();

ctx.closePath();

ctx.stroke();

复制代码

fillText(text,x,y,[maxwidth])绘制字符串，text表示文字内容，x,y文字坐标地方。[maxwidth]可选，设置字符最大宽大制止溢出。font设置字体。

别的参数：

textAlign 设置文字水平对齐情势 value 为 start|end|left|right|center  暗许值为start

textBaseline 设置文字垂直对齐格局 value 为 top|hanging|middle|阿尔法betic|ideographic|bootom  默以为阿尔法betic

大家风乐趣本人试试吧。

图片绘制：

呼.....写了半天终于写到正题了，相对于地点轻巧图形的绘图，图片绘制要用的越来越多一些，极度是在戏耍中。

此地介绍风流倜傥种较轻巧的章程，首先在body中写上：

   <div class="hide">

        <img src="" id="myImg">

   </div>

将你想要绘制的图形先参加body中，然后将父级div隐蔽，四个潜藏的div中可以归入一个品种中具备须求绘制的图纸以致是音频文件，就恍如叁个别人看不见的素材库。

然后：

 var ctx = document.getElementById("mycanvas").getContext("2d");

    var img=document.getElementById("myImg");

    ctx.beginPath();

    ctx.drawImage(img,x,y);

    ctx.closePath();

    ctx.stroke();

获得你想要绘制的图形对象，通过drawImage来绘制。这里drawImage()能够有3个参数，5个参数，9个参数。

3个参数：1.索要绘制的图片对象 2,3.图纸坐标；

5个参数：1.内需绘制的图片对象 2,3.图形坐标 4,5.图片宽高；

9个参数：1.内需绘制的图纸对象 2,3.绘制图片的横纵向切割点 4.横向切割宽度 5.纵向切割中度 6,7.切割好的图样坐标 8,9.切割好的图片宽高。

绘制早先的备选工作： 1.在body中步向canvas标签，设置它的id、width、height，当然也得以动态设置它的宽高。 can...

着力骨骼

<canvas id="canvas" width=1000 height=1000 style="border: 1px black dotted"></canvas> <script> var ctx = document.getElementById('canvas').getContext('2d'); </script>

明日给大家共享一下，修真院官方网站JS职责11，深度思量中的知识点——怎样利用canvas？(初阶)

矩形

实心：

// 填充色 (默以为铜锈绿) ctx.fillStyle = 'darkSlateBlue'; // 规定画布左上角坐标为 (0, 0) // 矩形左上角坐标 (0, 0) // 矩形大小 100*100 ctx.fillRect(0, 0, 100, 100);

空心：

// 边框颜色 (私下认可海洋蓝) ctx.strokeStyle = 'darkSlateBlue'; // 规定画布左上角坐标为 (0, 0) // 矩形左上角坐标 (0, 0) // 矩形大小 100*100 ctx.strokeRect(0, 0, 100, 100);

1.背景介绍

圆形

实心：

ctx.fillStyle = 'darkSlateBlue'; ctx.beginPath(); ctx.arc(100, 100, 50, 0, Math.PI * 2, true); ctx.closePath(); ctx.fill();

空心：

ctx.strokeStyle = 'darkSlateBlue'; ctx.beginPath(); ctx.arc(100, 100, 50, 0, Math.PI * 2, true); ctx.closePath(); ctx.stroke();

Canvas是HTML5新添的组件，它就疑似意气风发块幕布，可以用JavaScript在地点绘制各类图片、动画等。

线段

ctx.strokeStyle = 'darkSlateBlue'; ctx.beginPath(); ctx.moveTo(100, 100); // 起点 ctx.lineTo(200, 200); ctx.lineTo(300, 100); // ctx.closePath(); ctx.stroke();

并未有Canvas的时代，绘图只好依赖Flash插件达成，页面不得不用JavaScript和Flash举办互动。有了Canvas，大家就再也无需Flash了，间接利用JavaScript实现绘制。

图像

动态生成 img：

var img = new Image(); // 应当要等图片载入后(可能以前在缓存中了)技术用 drawImage 方法 img.onload = function() { // 左上角坐标 & 图像大小 ctx.drawImage(img, 0, 0, 100, 56); }; img.src = '0.jpg';

抑或直接从 dom 中取：

var img = document.getElementById('myImg'); ctx.drawImage(img, 0, 0, 100, 56);

2.文化解析

文字

文字) 的职分设定相对复杂，不像矩形、图像同样有个固定的左上角坐标，也不像圆一样有一定的圆心。文字的岗位设置也是二个近似 (x, y) 方式的坐标，这么些职位能够是文字的 4 个角，可能大旨。

x 部分，蓝线（水平坐标）为 x 坐标所在地点（textAlign 属性）：

ctx.font = "bold 80px serif" ctx.textAlign = "start"; // 私下认可值为 start ctx.fillStyle = 'darkSlateBlue'; // 文本内容、坐标 ctx.fillText('hello world', 0, 0);

y 部分，蓝线（垂直坐标）为 y 坐标所在位置（textBaseline 属性）：

ctx.font = "bold 80px serif" ctx.textAlign = "start"; // 私下认可值为 start ctx.textBaseline = "hanging"; // 私下认可值为 阿尔法betic ctx.fillStyle = 'darkSlateBlue'; // 文本内容、坐标 ctx.fillText('hello world', 0, 0);

故此文字的职责共有 5*6=30 种。

fillText 方法不帮助文件断行，即怀有文件出现在生机勃勃行内。所以，借使要生成多行文本，独有调用数十次fillText 方法。

中空的话用 stroke 就可以。

2.1 canvas的宽容性

其他 API

属性：

• lineWidth：stroke 的线条宽度 ctx.lineWidth = 2

方法：

• clearRect： 清除某部分（矩形区域）画布 ctx.clearRect(0, 0, 100, 100)
• measureText： 计算文本对象的增幅
• translate
• rotate

Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 标签。

Read More

• Canvas API (w3cschool)
• HTML5 Canvas — the Basics (Opera)
• Canvas API (ruanyifeng)

• Canvas tutorial (MDN)

  1 赞 3 收藏 评论

2.2 canvas的局部着力属性

第一得说下width和height属性了，那是在canvas中必备的习性。

width:画布的中度。和风流倜傥幅图像同样，那本性子能够钦赐为多少个平头像素值或许是窗口高度的百分比。当这几个值退换的时候，在该画布上一度到位的此外绘图都会擦除掉。；暗许值是 300。

height:画布的升幅。和生气勃勃幅图像同样，那天个性能够钦命为三个莫西干发型像素值或许是窗口宽度的比重。当那几个值改造的时候，在该画布上大器晚成度完毕的此外绘图都会擦除掉。暗许值是 width的百分之五十。

123

何以采取dom绘出一些简便的图

在此边就需求运用一些特性：

fillStyle:设置或再次回到用于填充美术的颜料、渐变或形式。举个例子说绘制贰个渐变色的矩形

fillRect(x,y,width,height):从坐标(x,y)处绘制八个长度为width,宽度为height的填充矩形

demo1 制作渐变矩形

var a=document.getElementById("myCanvas");

var demo1=a.getContext("2d");

var my_gradient=demo1.createLinearGradient(0,0,0,170);

my_gradient.addColorStop(0,"red");

my_gradient.addColorStop(1,"blue");

demo1.fillStyle=my_gradient;

demo1.fillRect(20,20,150,100);

strokeStyle:设置或再次回到用于笔触的颜料、渐变或方式。

strokeRect(x,y,width,height):从坐标(x,y)处绘制四个长短为width,宽度为height的矩形边框

line-width:表示边框宽度

canvas里面还能加上一些文本属性，比方说font,textAlign,textBaseline等等

demo2制作渐变矩形框

var b=document.getElementById("myCanvas");

var demo2=b.getContext("2d");

var gradient=demo2.createLinearGradient(0,0,170,0);

gradient.addColorStop("0","#FFF");

gradient.addColorStop("0.5","blue");

gradient.addColorStop("1.0","red");

// 用渐变举办填写

demo2.strokeStyle=gradient;

demo2.lineWidth=10;//边框宽度

demo2.strokeRect(20,20,150,100);

demo3 使用font, textAlign属性

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

// 在职位 150 创造蓝线

ctx.strokeStyle="blue";

ctx.moveTo(150,20);

ctx.lineTo(150,170);

ctx.stroke();

ctx.font="15px Arial";

// 显示不相同的 textAlign 值

ctx.textAlign="start";

ctx.fillText("textAlign=start",150,60);

ctx.font="40px Arial";

ctx.textAlign="end";

ctx.fillText("textAlign=end",150,80);

ctx.textAlign="left";

ctx.fillText("textAlign=left",150,100);

ctx.textAlign="center";

ctx.fillText("textAlign=center",150,120);

ctx.textAlign="right";

ctx.fillText("textAlign=right",150,140);

2.3 canvas中的一些常用方法

1).lineTo():添加一个新点，然后在画布中成立从该点到最后钦点点的线条

2).moveTo():把渠道移动到画布中的指确定地点，不创建线条

3).stroke():绘制已定义的门路

demo4 canvas展现路线；

var canvas = document.getElementById('myCanvas'); //获取上下文对象，canvas相当多常用方法都以基于那些目的实现的

var context = canvas.getContext("2d"); //近些日子参数唯有2d

context.lineWidth = 5;  //线条宽度

context.moveTo(10,10);  //光标移到那一点

context.lineTo(10,50);  //下一点坐标

context.lineTo(100,50);  //下一点坐标

context.stroke();        //绘制路线

4).begin帕特h():开始一条门路，或重新载入参数当前路径

5).arc():创建弧/圆线

6).closePath():创制从当前点回到最早点的门道

demo5.绘制三角形

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.beginPath();

ctx.moveTo(20,20);

ctx.lineTo(20,100);

ctx.lineTo(70,100);

ctx.closePath();

ctx.stroke();

3.遍布难点

图像能还是不可能松开canvas上？

4.消除方案

可因而选取drawImage(image,x,y)就能够将图像放到canvas上，然后在canvas内设置宽高，就足以将图像放到画布中。

demo6.利用canvas渲染图片

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

var img=document.getElementById("img");

img.onload = function() {

ctx.drawImage(img,0,0);

}

5.编码实战

6.扩张思虑

在上个demo中开掘只要设置canvas标签css的width，height与在canvas中设置width，height分裂等，那是为啥？

惊人和宽窄是用来绘图的逻辑帆布尺寸和是例外的离开style.height和style.widthCSS属性。假诺不设置CSS属性，画布的本征大小将被看作突显大小; 假使设置CSS属性，并且它们与画布尺寸分化，则您的内容将要浏览器中缩放。

7.参谋文献

参考一：https://stackoverflow.com/questions/4938346/canvas-width-and-height-in-html5canvas中width,height与style width,style height的区别

参考二：http://www.runoob.com/html/html5-canvas.htmlHTML5 Canvas | 菜鸟教程

参考三：http://www.w3school.com.cn/html5/html5_canvas.aspW3C HTML5标签Canvas

8.更加多研究

1.canvas能够使图像发生放大减弱效果呢？

2.canvas成分内部的width和height属质量使用rem单位吗？

本文由永利集团登录网址发布于web资讯,转载请注明出处：什么样使用canvas绘图

关键词：