跟KingDZ学HTML5之三 画布Canvas

接轨立异大家的教程,哈哈,个人以为 ,这些HTML5 的法定 LOGO 
怎么看,怎么像变形金刚。

        Canvas  基础篇

1.它是H5新的API  

 什么是API ?   答:接口   广义上的意义   

2.canvas 简介  什么是canvas?

canvas是一个html标签,
不过给js提供接口,通过JS代码能够在canvas成分上海体育场所案

canvas能够选拔在 游戏 炫丽的片段功效 ,banner,报表,可视化的数据 ,地图
,图形编辑器 , 模拟器 

3.canvas 属性 (width ,height)

4.主意  getContext() 获取绘图境况 参数 2d,webgl       ***var cxt
=canvas.getContext(’2d’); 

坐标 X坐标 Y 坐标     原点 左上角

5.Canvas主干美术 

–  路线始于和闭合 

–  beginPath()开启新的必经之路(状态) 而且终结后面包车型地铁门路

–  close帕特h() 甘休前段时间路线 並且使当前路径闭合

— 线

– moveTo(x,y)起首点坐标 

– lineTo (x,y)绘制直线(接着上三个点)

6.飞跃矩形工具 

* rect(x, y, w, h)    绘制矩形的路径

* strokeRect(x,y,w,h)  绘制描边的矩形

* fillStyle(x,y,w,h) 绘制的填写的矩形

* clearRect(x,y,w,h)  清除矩形(绘制的矩形区域内的颠末将被擦除)

7.画圆(弧)

arc(x,y,r,start, end, true/false)

cxt.arc(300,250,150,0,Math.PI*2); 

末尾三个参数是象征 顺时针(false)依旧逆时针(true) 暗中认可false   

8.文字

*font  属性 设置大小和字体

*textAlign 属性 文字的档期的顺序对齐格局  start(默        
 认)/end/left/right/center

 *textBaseLine 属性 文字的垂直对齐情势                
 阿尔法betic(私下认可)/top/bottom/middle

* fillText(text, x, y) 填充文字

*strokeText(text,x,y)描边文字

*measureText(text)重返该文本在画布中所占的增长幅度

9.描边

*stroke()    填充当前路径

*strokeStyle  属性  设置描边颜色

*lineWidth  属性  设置描边线条宽度

10.填充

* fill()  填充当前的门路

* fillStyle  属性  设置填充的颜料

* 注意: 非0环抱的算法

“非零环绕法规”是那般来推断有自己交叉情形的门道的:对于路线中的肆意给定区域,从该区域之中画一条丰富长的线条,

使此线段的顶点完全落在路线范围之外。

HTML5 Canvas,html5canvas

<canvas>
标签定义图形,比方图片和其余图像,您必须利用脚本来绘制图形。

在画布上(Canvas)画三个浅绛红矩形,渐变矩形,彩色矩形,和有些彩色的文字。

跟KingDZ学HTML5之三 画布Canvas。 


HTML5 Canvas入门

亚洲必赢官网 1亚洲必赢官网 2

11.浏览器不相配管理

注:ie9以上才支撑canvas,其余chrome、ff、苹果浏览器等都辅助

·只要浏览器包容canvas,那么就能够支撑多边api(个别最新api除此而外)

·移动端的包容情形十二分可观,基本上随意选择

·2d的支撑的都至极好,3d(webgl)ie11才支撑,其余都辅助

·假如浏览器不相称,最棒开展协调提醒请参见下方写法举行提醒

(画三个直角三角形)

//获取canvas 元素(画布)

在body中写四个<canvas
id=‘mycanvas’>您的野生浏览器该换了</canvas>

var canvas = document.querySelector(“#mycanvas”);

//设置画布大小

canvas.width = 600;

canvas.height = 500;

canvas.style.border = “1px solid #ccc”;

//获取绘图蒙受

var cxt = canvas.getContext(“2d”);

//绘制

cxt.beginPath();

cxt.moveTo(100,100);

cxt.lineTo(400,100);

cxt.lineTo(400,400);

cxt.lineTo(300,300);

cxt.closePath();

//描边

cxt.lineWidth = 20;

cxt.stroke();

//填充

cxt.fillStyle = “red”;

cxt.fill();

12.拔除画布

* 使用 clearRect()

* 重新安装 canvas的宽度  canvas.width=canvas.width

什么是 Canvas?

HTML5
<canvas> 元素用于图形的绘图,通过脚本
(经常是JavaScript)来实现.

<canvas>
标签只是图形容器,您必须运用脚本来绘制图形。

您能够由此多样艺术应用Canva绘制路线,盒、圆、字符以及丰盛图像。


<canvas>
标签定义图形,举例图片和别的图像,您必须采纳脚本来绘制图形。
在画布上(Canvas)画多少个革命矩形,渐变矩形,彩色矩形,和一些花团锦簇的文字。

神马关系~~~

浏览器支持

亚洲必赢官网 3亚洲必赢官网 4亚洲必赢官网 5亚洲必赢官网 6亚洲必赢官网 7

Internet
Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 <canvas>
元素.

**注意: Internet
Explorer 8 及更早 IE 版本的浏览器不支持 <canvas> 成分.**


什么是 Canvas?
HTML5 <canvas> 成分用于图形的绘图,通过脚本
(平时是JavaScript)来完毕.
<canvas> 标签只是图形容器,您必须使用脚本来绘制图形。
您能够因此三种方法应用Canva绘制路线,盒、圆、字符以及丰硕图像。

<Canvas> 是HTML5中新出现的二个要素。正是足以经过  JS绘制图形。

开创二个画布(Canvas)

二个画布在网页中是二个矩形框,通过
<canvas> 成分来绘制.

**注意: 暗中认可意况下
<canvas> 元素未有边框和剧情。**

<canvas>轻易实比方下:

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

**注意: 标签日常须求钦点二个id属性
(脚本中偶尔引用), width 和 height 属性定义的画布的大小.**

**提示:你能够在HTML页面中应用多个<canvas> 成分.**

采用style 属性来增添边框:

浏览器支持
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持
<canvas> 元素.
只顾: Internet Explorer 8 及更早 IE 版本的浏览器不帮助 <canvas>
成分.

当下浏览器对 Canvas 的支撑情况如下

实例

<canvas
id=”myCanvas” width=”200″ height=”100″
style=”border:1px solid #000000;”>
</canvas>


创办多个画布(Canvas)

IE FF Chrome Safari Opera IPhone Android
版本7.0以上 版本3.0以上 版本3.0以上 版本3.0以上 版本10.0以上 版本1.0以上 版本1.0以上

选择 JavaScript 来绘制图像

canvas
元素自己是不曾绘图本事的。全数的绘图职业务必在 JavaScript
内部产生:

二个画布在网页中是三个矩形框,通过canvas> 成分来绘制.

IE7 和  IE8  须要一个 第三方的 类库  ExplorerCanvas  扶助   IE9 无需 
,FF===Firefox。

实例

<script>
var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
ctx.fillStyle=”#FF0000″;
ctx.fillRect(0,0,150,75);
</script>

实例分析:

首先,找到
<canvas> 元素:

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

亚洲必赢官网,然后,创建
context 对象:

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

getContext(“2d”)
对象是内建的 HTML5
对象,具有二种绘制路线、矩形、圆形、字符以及丰硕图像的不二等秘书技。

上面包车型地铁两行代码绘制三个紫水晶色的矩形:

ctx.fillStyle=”#FF0000″;
ctx.fillRect(0,0,150,75);

设置fillStyle属性能够是CSS颜色,渐变,或图案。fillStyle
暗中认可设置是#000000(黑色)。

fillRect(x,y,width,height)
方法定义了矩形当前的填充方式。


瞩目: 私下认可意况下 <canvas> 成分未有边框和故事情节。
<canvas>简单实譬喻下:
<canvas id=”myCanvas” width=”200″ height=”100″></canvas>
留心: 标签日常供给内定三个id属性 (脚本中时常援引), width 和 height
属性定义的画布的大小.
唤醒:你能够在HTML页面中应用多少个 <canvas> 成分.
运用 style 属性来增添边框:
实例
<canvas id=”myCanvas” width=”200″ height=”100″
>
</canvas>

画布(Canvas)是三个从未内容也并未有边框的矩形区域。大家能够调整当中的每叁个像素。

Canvas 坐标

canvas
是贰个二维网格。

canvas
的左上角坐标为 (0,0)

上边的
fillRect 方法具有参数 (0,0,150,75)。

情趣是:在画布上制图
150×75 的矩形,从左上角开端 (0,0)。

坐标实例

如下图所示,画布的
X 和 Y
坐标用于在画布上对美术进行定位。鼠标移动的矩形框上,显示定位坐标。

X

Y

<iframe
data-ke-src=””
frameborder=”0″
src=””
style=”width: 400px; height: 120px;”></iframe>


动用 JavaScript 来绘制图像

下边大家首先定义多个 Canvas成分 

Canvas – 路径

在Canvas上画线,大家将运用以下二种方式:

  • moveTo(x,y)
    定义线条开始坐标
  • lineTo(x,y)
    定义线条甘休坐标

绘图线条大家不能够不利用到
“ink” 的措施,如同stroke().

canvas 成分本人是尚未绘图技艺的。全体的绘图工作必须在 JavaScript
内部产生:
实例
<script>
var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
ctx.fill ;
ctx.fillRect(0,0,150,75);
</script>

 <canvas id="fistcancas" width="300" height="300"></canvas>  

实例

概念先河坐标(0,0),
和得了坐标 (200,100). 然后选择 stroke() 方法来绘制线条:

JavaScript:

var
c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

在canvas中绘制圆形,
大家将选用以下格局:

  • arc(x,y,r,start,stop)

实则大家在绘制圆形时选择了
“ink” 的办法, 譬喻 stroke() 只怕 fill().

实例剖判:
首先,找到 <canvas> 元素:
var c=document.getElementById(“myCanvas”);
然后,创建 context 对象:
var ctx=c.getContext(“2d”);
getContext(“2d”) 对象是内建的 HTML5
对象,具备七种绘制路线、矩形、圆形、字符以及丰硕图像的不二秘技。
下边包车型大巴两行代码绘制一个浅紫的矩形:
ctx.fill ;
ctx.fillRect(0,0,150,75);
安装fillStyle属性能够是CSS颜色,渐变,或图案。fillStyle
默许设置是#000000(黑色)。
fillRect(x,y,width,height) 方法定义了矩形当前的填写格局。

好了 ,那几个正是最中央得一个  canvas 成分的定义方法了。

实例

应用
arc() 方法 绘制一个圆:

JavaScript:

var
c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();


例子:

canvas
独有多少个属性,width和height,这一个属性可选况且能够透过JS也许css来决定。暗中同意值是
width=300  height=150

Canvas – 文本

应用
canvas 绘制文本,主要的品质和章程如下:

  • font –
    定义字体
  • fillText(text,x,y) –
    在 canvas 上制图实心的公文
  • strokeText(text,x,y) –
    在 canvas 上绘制空心的文书

使用
fillText():

<!doctype html>  <html>  <head>  <meta charset="utf-8"/>  <meta name="keywords" content="脚本小子_小贝_HTML5_canvas"/>  <meta name="description" content="脚本小子_小贝_HTML5_canvas"/>  <meta name="" content="脚本小子小贝 xiaobei qq:2801616735"/>  <title>HTML5_canvas</title>  <style>  p{      border:1px dashed red;      padding:5px;  }  canvas{      border:1px solid yellow;  }  </style>  </head>    <body>      <h2>HTML5_canvas</h2>      <ul style="list-style:none">          <li>1、创建canvas</li>          <li>2、创建矩形</li>          <li>3、创建线条</li>          <li>4、创建文本</li>          <li>5、创建圆形</li>          <li>6、创建图像</li>      </ul>      <hr/>      <h3>1、创建canvas</h3>      <p>          <canvas id="canvas">亲,你的浏览器不支持canvas.^_^</canvas>      </p>      <hr/>      <h3>2、创建矩形</h3>      <p>          <canvas id="canvas1">亲,你的浏览器不支持canvas.^_^</canvas>          <button onclick="func(1);">创建矩形</button>      </p>      <hr/>      <h3>3、创建线条</h3>      <p>          <canvas id="canvas2">亲,你的浏览器不支持canvas.^_^</canvas>          <button onclick="func(2);">创建线条</button>      </p>      <hr/>      <h3>4、创建文本</h3>      <p>          <canvas id="canvas3">亲,你的浏览器不支持canvas.^_^</canvas>          <button onclick="func(3);">创建文本</button>      </p>      <hr/>      <h3>5、创建圆形</h3>      <p>          <canvas id="canvas4">亲,你的浏览器不支持canvas.^_^</canvas>          <button onclick="func(4);">创建圆形</button>      </p>      <hr/>      <h3>6、创建图像</h3>      <p>          <img src="canvas.png" id="img"/>          <canvas id="canvas5">亲,你的浏览器不支持canvas.^_^</canvas>          <button onclick="func(5);">创建图形</button>                </p>  </body>  <script>      function func(id)      {          var c = document.getElementById('canvas'+id);          var ctx = c.getContext('2d');          switch(id)          {              case 1:                  ctx.fillStyle = "#FF0000";                  ctx.fillRect(10,10,100,50);              break;              case 2:                  ctx.beginPath();                  ctx.moveTo(10,10);                  ctx.lineTo(100,100);                  ctx.stroke();              break;              case 3:                  ctx.font="20px Arial";                  ctx.fillText("脚本小子_小贝_HTML5_canvas",10,50);              break;              case 4:                  ctx.beginPath();                  ctx.arc(95,50,40,0,2*Math.PI);                  ctx.stroke();              break;              case 5:                  var img=document.getElementById("img");                  c.width=img.width;                  c.height=img.height;                  ctx.drawImage(img,10,10);              break;          }                }  </script>  </html>

理之当然思索到,大概浏览器不支持,所以我们就应用前两节课的方法

实例

使用
“Arial” 字体在画布上制图二个高 30px 的文字(实心):

JavaScript:

var
c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
ctx.font=”30px Arial”;
ctx.fillText(“Hello World”,10,50);

使用
strokeText():

浏览:

    <canvas id="fistcancas" width="300" height="300">          <img src="2.png" width="300" height="300" alt="error">      </canvas>      <canvas id="secondcancas" width="300" height="300">          对不起,浏览器不支持此标签      </canvas>  

实例

使用
“Arial” 字体在画布上绘制一个高 30px 的文字(空心):

JavaScript:

var
c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
ctx.font=”30px Arial”;
ctx.strokeText(“Hello World”,10,50);


预备知识:

好了,我们连续吧。轻易的创始完结以往,下边伊始大家的局地正常的操作吧。当然,你能够给
canvas 增添一些  样式表的操作,如上边得图形。

Canvas – 渐变

耳濡目染能够填充在矩形,
圆形, 线条, 文本等等, 各类形状能够友善定义分裂的颜色。

以下有二种分歧的办法来设置Canvas渐变:

  • createLinearGradient(x,y,x1,y1) –
    创造线条渐变
  • createRadialGradient(x,y,r,x1,y1,r1) –
    创制四个朝着/圆渐变

当大家利用渐变对象,必须利用二种或二种以上的苏息颜色。

addColorStop()方法钦赐颜色结束,参数使用坐标来陈诉,能够是0至1.

接纳渐变,设置fillStyle或strokeStyle的值为
渐变,然后绘制形状,如矩形,文本,或一条线。

使用
createLinearGradient():

易错点:

亚洲必赢官网 8

实例

创制三个线性渐变。使用渐变填充矩形:

JavaScript:

var
c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,”red”);
grd.addColorStop(1,”white”);
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

使用
createRadialGradient():

 

    <canvas id="fistcancas" style="border:2px dotted red;" width="100" height="100">          不支持此标签      </canvas>  

实例

创办二个通往/圆渐变。使用渐变填充矩形:

JavaScript:

var
c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,”red”);
grd.addColorStop(1,”white”);
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);



画布的伊始化是空白的,什么都并没有滴,大家要做的正是画图,当然这么些供给JS啦。

Canvas – 图像

把一幅图像放置到画布上,
使用以下情势:

  • drawImage(image,x,y)

好了,初叶吧,首先来二个最简便易行的,画三个100*100的长方形,填充色为鲜红。

利用图像:

亚洲必赢官网 9

<! doctype html>  <html>  <head>  <script type="text/javascript">          function draw() {              var c = document.getElementById("firstcancas");              var cxt = c.getContext("2d");              cxt.fillStyle = "#00ff00";              cxt.fillRect(0, 0, 150, 150);          }  </script>  </head>  <body>      <canvas id="firstcancas"  width="100" height="100">          浏览器不支持此标签      </canvas>      <input type="button" value="画图" onclick="draw();" />  </body>  </html>  

实例

把一幅图像放置到画布上:

JavaScript:

var
c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
var img=document.getElementById(“scream”);
ctx.drawImage(img,10,10);

Canvas,html5canvas canvas
标签定义图形,譬如图片和其他图像,您必须利用脚本来绘制图形。
在画布上(Canvas)画三个石磨蓝矩形,渐变矩…

好了 ,那个的功效

亚洲必赢官网 10

下边,轻松的印证一下上面的非常  draw 方法

var cxt = c.getContext(“2d”);

动用脚本画图首先必要渲染上下文(rendering context),

它能够经过canvas元素对象的getContext方法来获得,同有时间得到的还应该有部分图案须求调用的函数。

getContext() 接受一个用来描述其品种的值作为参数。也正是  后边的 “2d”
或许 “3d”

再有 ,请我们只顾 那么些地点的 2d 大概 3d[脚下不协助]  必定借使小写的
,大写的不过会发生错误的哦

cxt.fillStyle = “#00ff00”; 这几个别讲了,料定是填充颜色啊

由此 fillStyle 和 strokeStyle 属性能够容易的安装矩形的填写和线条。

颜色值使用方法和 CSS 一样:十六进制数、rgb()、rgba() 和 hsla()(
若浏览器援助,如Firefox)。

因而 fillRect 能够绘制带填充的矩形。

利用 strokeRect 能够绘制唯有边框未有填写的矩形。

一经想解除部分 canvas 能够动用 clearRect。

上述八个章程的参数一样:x, y, width, height。前三个参数设定 (x,y)
坐标,后多少个参数设置矩形的莫斯中国科学技术大学学和增幅。

上面大家品尝着做一些器古怪的功力。

    <script type="text/javascript">          function draw() {              var c = document.getElementById("firstcancas");              var cxt = c.getContext("2d");              //红色区域,及其坐标              cxt.fillStyle = "rgb(240,0,0)";              cxt.fillRect(50, 50, 160, 160);              //在红色区域上面 添加一个灰色的区域,并且设置 透明度为 0.6              cxt.fillStyle = "rgba(100, 100, 100, 0.6)";              cxt.fillRect(30, 30, 200, 200);              //设置在最外面有一个绿色的只有边框的矩形              cxt.strokeStyle = "#00ff00";              cxt.lineWidth = 5;   //设置边框的宽度为 5              //最后去掉 这个图形的中心。              cxt.strokeRect(30, 30, 200, 200);              cxt.clearRect(80, 80, 100, 100);          }  </script>  

好了,表明很详细了,效果如下

亚洲必赢官网 11

 

好了,那节课程就到此截至了,款待我们关心作者,期待我们点一下推荐介绍,哈哈,多谢了。


网站地图xml地图