接下来我们从一些最简单的图形开始绘制,0) /

2019-09-22 09:23栏目:前端开发
TAG:

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();

复制代码

begin帕特h()开启绘制路线,closePath()闭合绘制路线,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>

1
2
3
4
5
<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);

1
2
3
4
5
6
7
// 填充色 (默认为黑色)
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
2
3
4
5
6
7
// 边框颜色 (默认黑色)
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();

1
2
3
4
5
6
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();

1
2
3
4
5
6
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();

1
2
3
4
5
6
7
8
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';

1
2
3
4
5
6
7
8
9
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);

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

2.文化剖判

文字


文字) 的职位设定相对复杂,不像矩形、图像同样有个定点的左上角坐标,也不像圆同样有定位的圆心。文字的职分设置也是贰个好像 (x, y) 格局的坐标,这么些地方能够是文字的 4 个角,只怕宗旨。

x 部分,蓝线(水平坐标)为 x 坐标所在地点(textAlign 属性):

图片 1

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

1
2
3
4
5
6
ctx.font = "bold 80px serif"
ctx.textAlign = "start";  // 默认值为 start
 
ctx.fillStyle = 'darkSlateBlue';
// 文本内容、坐标
ctx.fillText('hello world', 0, 0);

y 部分,蓝线(垂直坐标)为 y 坐标所在地方(textBaseline 属性):

图片 2

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

1
2
3
4
5
6
7
ctx.font = "bold 80px serif"
ctx.textAlign = "start";  // 默认值为 start
ctx.textBaseline = "hanging"; // 默认值为 alphabetic
 
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 收藏 评论

图片 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,text阿里gn,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).beginPath():最先一条路线,或重新设置当前路径

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单位吗?

版权声明:本文由大奖888-www.88pt88.com-大奖888官网登录发布于前端开发,转载请注明出处:接下来我们从一些最简单的图形开始绘制,0) /