菜单

澳门金沙国际:HTML5新增基本工具——canvas

2019年3月19日 - 金沙前端

canvas api

2016/01/11 · HTML5 ·
Canvas

原稿出处: 韩子迟   

我们好,笔者是IT修真院圣多明各分院第陆期的学生先小波,一枚正直纯洁善良的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()开启绘制路径,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()共有八个参数:一 、2象征初叶面,③ 、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()中有八个参数:一 、2.渐变早先圆的圆心坐标,3.渐变开端圆的半径,四 、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中得以放入三个品类中具备必要绘制的图片甚至是音频文件,就象是1人家看不见的素材库。

 

然后:

 

 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()能够有贰个参数,5个参数,8个参数。

 

三个参数:1.亟需绘制的图形对象 2,3.图纸坐标;

 

七个参数:1.内需绘制的图纸对象 2,3.图形坐标 4,5.图形宽高;

 

柒个参数:1.亟待绘制的图形对象 2,3.制图图片的横纵向切割点 4.横向切割宽度
5.纵向切割中度 6,7.切割好的图片坐标 8,9.切割好的图片宽高。

绘制以前的预备工作:
1.在body中投入canvas标签,设置它的id、width、height,当然也能够动态设置它的宽高。
can…

1、什么是canvas?

着力骨骼


 

<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?(伊始)

<canvas>标签是h5新增的,通过脚本(平常是js)来绘制图形,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.背景介绍

canvas能够绘制路径、图形、字以及丰裕图像。

圆形


实心:

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在上边绘制各样图片、动画等。

澳门金沙国际 1

线段


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完毕绘制。

② 、创制3个画布

图像


动态生成 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.文化剖析

<canvas  id=”can”  width=”200″ height=”100″></canvas>

文字


文字)
的职位设定绝对复杂,不像矩形、图像一样有个稳定的左上角坐标,也不像圆一样有一定的圆心。文字的职责设置也是2个好像
(x, y) 情势的坐标,这一个职位可以是文字的 4 个角,或然中央。

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

澳门金沙国际 2

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
属性):

澳门金沙国际 3

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的包容性

canvas中供给钦赐3个id属性供脚本引用,width和height定义画布的轻重缓急。其余能够用style来添加画布边框。

其他 API


属性:

方法:

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

<style type=”text/css”>
canvas {
  border: #ccc solid 1px;
}
</style>

Read More


澳门金沙国际 4

2.2 canvas的一些主干质量

三 、使用js绘制图像

先是得说下width和height属性了,那是在canvas中要求的习性。

canvas本人并未绘图能力,全部的绘图工作必须在js内部形成:

width:画布的中度。和一幅图像一样,这几个脾性可以钦定为二个平头像素值或然是窗口中度的百分比。当那一个值改变的时候,在该画布上业已到位的别样绘图都会擦除掉。;暗中认可值是
300。

第2找到canvas成分:

height:画布的增长幅度。和一幅图像一样,这么些天性能够钦赐为一个整数像素值恐怕是窗口宽度的比例。当以此值改变的时候,在该画布上早已成功的其他绘图都会擦除掉。暗许值是
width的八分之四。

var  can=document.getElementById(“can”);

123

附带创制context对象(getContext(“2d”)对象是内建的H5对象,拥有两种制图图形方法):

如何利用dom绘出一些归纳的图

var  ctx=can.getContext(“2d”);

在此间就要求利用一些特性:

安装填充图形的颜料:

fillStyle:设置或回到用于填充绘画的颜料、渐变或情势。比如说绘制1个渐变色的矩形

ctx.fillStyle=”#FF0000″;    //
fillStyle能够是css颜色,渐变,或图案,暗中同意设置是浅深红(#000000)

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

概念矩形:

demo1 制作渐变矩形

ctx.fillRect(0,0,150,70);    // 
fillRect(x,y,width,height)定义了矩形及其长度宽度

var a=document.getElementById(“myCanvas”);

4、Canvas坐标

var demo1=a.getContext(“2d”);

canvas是1个二维网格。cancas的左上角坐标为(0,0),上边的fillRect方法的参数(0,0,150,70)意思正是从左上角(0,0)起初在画布上绘制多个150*70的矩形。

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

5、Canvas路径

my_gradient.addColorStop(0,”red”);

画线:

my_gradient.addColorStop(1,”blue”);

begin帕特h();新建一条途径

demo1.fillStyle=my_gradient;

moveTo(x,y);定义线条初叶坐标

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

lineTo(x,y);定义线条甘休坐标

澳门金沙国际 ,strokeStyle:设置或重返用于笔触的颜料、渐变或情势。

closePath();闭合路径后,图形绘制又再次重回上下文中

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

stroke();通过线条来绘制图形概略

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图