关于H5的Canvas

By admin in 4858美高梅 on 2019年4月9日

1、什么是canvas?

HTML5 Canvas,html5canvas

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

在画布上(Canvas)画三个革命矩形,渐变矩形,彩色矩形,和1部分绚丽多彩的文字。

 


一.概述

canvas只是图像的器皿,绘制图像要求动用javascript来形成

HTML5- Canvas入门(二)

矩形的绘图一共有八个口令,分别是 ctx.fillRect(x, y, width, height) 和
ctx.strokeRect(x, y, width, height) ,参数中的 x 和 y
依旧表示需绘制的矩形的初始点坐标(相对canvas原点),width 和
height代表需绘制的矩形宽高。

 

而 fillRect 代表绘制1个诚心矩形,strokeRect
代表绘制二个描边矩形,大家来1个不难的事例:

 

复制代码

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

你的浏览器不援助canvas,建议利用最新版的Chrome

</canvas>

 

<script>

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

var ctx = c.getContext(“贰d”); //获取该canvas的二D绘制环境目的

ctx.fillRect(10,十,50,50);  
//从画布上的(10,10)坐标点为早先点,绘制3个宽高均为50px的诚心矩形

ctx.strokeRect(70,10,50,50);  
//从画布上的(70,拾)坐标点为起头点,绘制1个宽高均为50px的描边矩形

</script>

 

 

 

 

 

上面大家绘制了八个暗中同意浅紫的拳拳之心和描边矩形,相信您也联想到上一章大家绘制线段时,若未有定义strokeStyle,则线段也是暗中认可为中湖蓝的业务。那么我们要给这俩矩形上色,也许你也会联想到应该采取
*Style 来处理,而那想法也是不易的。

 

在canvas上,给实心对象上色能够用 fillStyle
来定义,给描边对象上色大家得以用 strokeStyle来定义,它们的赋值均为
color|gradient|pattern ,在上章大家已经细说过,那里不再赘言。

 

那么我们来给上方绘制了的殷殷矩形填充三个放射状渐变(黄-蓝-红),将描边矩形的描边设为镉绿。大家能够这么做:

 

复制代码

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

你的浏览器不协助canvas,建议采用最新版的Chrome

</canvas>

 

<script>

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

var ctx = c.getContext(“2d”); //获取该canvas的2D绘制环境指标

 

var grd = ctx.createRadialGradient(35,35,0,3五,3伍,3陆);
 //定义放射状渐变对象,设定渐变线开端点和结束点坐标,坐标格式为(起初点x,初阶点y,甘休点x,甘休点y)

grd.addColorStop(0,”yellow”);   //定义渐变线源点颜色

grd.addColorStop(0.5,”blue”);   //定义渐变线中间点的水彩

grd.addColorStop(一,”red”);  //定义渐变线停止点的颜色

ctx.fillStyle = grd;   //将放射状渐变对象赋值给fillStyle

ctx.fillRect(拾,拾,50,50);  
//从画布上的(拾,拾)坐标点为初步点,绘制一个宽高均为50px的诚心矩形

 

ctx.beginPath();  //重置画笔,那是个好习惯

ctx.strokeStyle = “green”;   //定义描边颜色为丁香紫

ctx.strokeRect(70,十,50,50);  
//从画布上的(70,拾)坐标点为起先点,绘制二个宽高均为50px的描边矩形

</script>

复制代码

功用如下:

 

 

那里要提到的是上壹章未有仔细介绍过的放射状渐变方法 createRadialGradient
,其语法为

 

ctx.createRadialGradient( Xstart, Ystart, Radiusstart, Xend, Yend,
Radiusend )

 

里头前多少个参数表示渐变起先圆形的为主坐标和半径,后多个参数表示渐变利落圆形的中式点心坐标和半径。

 

或是你会被那里的“半径”吸引,回看大家上章学习的createLinearGradient,它的参数并不曾“半径”的概念,如若您是一名平面设计师,你更可能认为放射状渐变只须要起先点和完工点坐标就能够了(终归PS/AI中的径向渐变只必要那三个点)。

 

但canvas在此地进入的“半径”参数依然有一定成效的,能够创设出比PS中径向渐变多少复杂一些的功效。

 

 

 

⑴ 大家先来三个最简便易行最佳精通的事例:

 

复制代码

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

var ctx = c.getContext(“二d”); //获取该canvas的二D绘制环境指标

 

var grd = ctx.createRadialGradient(70,70,0,70,70,100);
 //定义放射状渐变对象,设定开端圆和甘休圆中式点心重叠,且发轫圆半径为0

grd.addColorStop(0,”yellow”);   //定义渐变线起源颜色

grd.addColorStop(0.5,”blue”);   //定义渐变线中间点的颜料

grd.addColorStop(一,”rgba(25伍,0,0,0)”);
 //定义渐变线甘休点的水彩,在那之中颜色发光度为0

ctx.fillStyle = grd;   //将放射状渐变对象赋值给fillStyle

ctx.fillRect(0,0,c.width,c.height);   //绘制三个跟画布大小同等的热切矩形

复制代码

咱俩设置起初圆和得了圆中式点心相同,且起首圆半径为0,那么它的渐变线正是从两圆的正中开首到完工圆的边缘甘休。我们设置渐变线停止点颜色发光度为0是为着便于查看停止圆的边际。效果如下:

 

 

 

 

⑵ 大家在⑴的根底中将发轫圆的半径设为20,代码和法力图如下:

 

复制代码

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

var ctx = c.getContext(“二d”); //获取该canvas的贰D制图环境指标

 

var grd = ctx.createRadialGradient(70,70,20,70,70,100);
 //定义放射状渐变对象,设定初步圆和终结圆中点重叠,且起初圆半径为20

grd.addColorStop(0,”yellow”);   

grd.addColorStop(0.5,”blue”);  

grd.addColorStop(1,”rgba(255,0,0,0)”);  

ctx.fillStyle = grd;   

ctx.fillRect(0,0,c.width,c.height);  

复制代码

 

 

 

 


大家在⑵的功底上挪动发轫圆的当心,不要让它跟截至圆的中部重叠,代码和机能图如下:

 

复制代码

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

var ctx = c.getContext(“二d”); //获取该canvas的二D制图环境目的

 

var grd = ctx.createRadialGradient(60,40,20,70,70,100);
 //起头圆不仅有半径,而且中式点心跟停止圆中点区别等

grd.addColorStop(0,”yellow”);   

grd.addColorStop(0.5,”blue”);  

grd.addColorStop(1,”rgba(255,0,0,0)”);  

ctx.fillStyle = grd;   

ctx.fillRect(0,0,c.width,c.height);  

复制代码

 

 

 

 

在意大家在定义RadialGradient时,要幸免开始圆的限制超出甘休圆的限制(初步圆应当是终止圆内部的二个真子集),不然绘制出来的意义会冒出不可能预感的荒唐,例如上边包车型客车代码:

 

复制代码

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

var ctx = c.getContext(“二d”); //获取该canvas的2D绘制环境目的

 

var grd = ctx.createRadialGradient(60,60,50,70,70,50);
 //发轫圆的左侧超出了收尾圆内部区域

grd.addColorStop(0,”yellow”);   

grd.addColorStop(0.5,”blue”);  

grd.addColorStop(1,”rgba(255,0,0,0)”);  

ctx.fillStyle = grd;   

ctx.fillRect(0,0,c.width,c.height);  

复制代码

效果:

 

 

 

 

 至此大家学习了通过 fillRect 和 strokeRect
来绘制矩形,上面再讲三个Rect相关的意义——clearRect。

 

clearRect类似PS中的方块橡皮擦,能够擦除画布上随意一块矩形区域的内容,其语法如下:

 

ctx.clearRect( x, y, width, height );

 

其中 x 和 y 表示初步点坐标,width 和 height
表示那块“橡皮擦”的宽高。举个例子:

 

复制代码

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

var ctx = c.getContext(“2d”); //获取该canvas的二D绘制环境指标

 

ctx.fillStyle = “red”;   

ctx.fillRect(0,0,c.width,c.height);  

ctx.beginPath();

ctx.fillStyle = “blue”;   

ctx.fillRect(10,20,60,60);  

ctx.clearRect(20,20,80,50);
 //擦除以(20,20)坐标为源点,宽高为80*50的区域

复制代码

效果如下:

 

 

 

 

只顾clearRect不会化解掉以前定义过的体裁、画笔地点等绘制音信,打个比方,有时候大家须求清空整个画布,大家能够如此做:

 

复制代码

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

var ctx = c.getContext(“贰d”); //获取该canvas的贰D绘制环境目的

 

ctx.fillStyle = “blue”;   

ctx.fillRect(10,20,60,60);  

//下边重置画布大小,从而清空画布

c.width = c.width;  //在jQ中得以写为 c.attr(“width”, c.width());  

c.height = c.height;  //在jQ中得以写为 c.attr(“height”, c.height());  

//重新绘制2个矩形

ctx.fillRect(10,20,60,60);  

复制代码

关于H5的Canvas。这一个法子是经过重置画布大小,从而触发清空画布事件,但眼下定义的
fillStyle=”blue” 也被清空掉了,从而绘制了2个深黑的矩形:

 

 

借使不想解除掉从前定义的样式,我们能够通过clearRect来贯彻:

 

复制代码

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

var ctx = c.getContext(“二d”); //获取该canvas的二D绘制环境目的

 

ctx.fillStyle = “blue”;   

ctx.fillRect(10,20,60,60);  

//下边通过clearRect来擦除画布

ctx.clearRect(0,0,c.width,c.height);

//重新绘制三个矩形

ctx.fillRect(10,20,60,60);  

复制代码

实践结果如下:

 

 

 

 

 

最终聊一下多头形的绘图,其达成分外简单,先来个例证:

 

复制代码

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

var ctx = c.getContext(“二d”); //获取该canvas的2D绘制环境指标

 

//定义样式

ctx.fillStyle = “blue”;   

ctx.strokeStyle = “red”;

ctx.lineWidth = “8”;

ctx.lineJoin = “round”;

 

//绘制多边形

ctx.moveTo(10,10);

ctx.lineTo(100,30);

ctx.lineTo(120,80);

ctx.lineTo(60,60);

ctx.lineTo(10,10);

 

ctx.stroke();  //描边

ctx.fill();    //填充

复制代码

可见大家那边透过lineTo绘制了多方形的每条边(注意源点跟终点是同二个坐标),然后经过
stroke() 来描边、fill() 来填充,其实施效用如下:

 

 

心灵的爱侣会发觉该多边形左上角的俩条描边未有接在一起,那是因为大家并未把那一个多边形路线闭合起来,大家能够通过
ctx.closePath() 来消除这些标题:

 

复制代码

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

var ctx = c.getContext(“二d”); //获取该canvas的2D制图环境指标

 

//定义样式

ctx.fillStyle = “blue”;   

ctx.strokeStyle = “red”;

ctx.lineWidth = “8”;

ctx.lineJoin = “round”;

 

//绘制多边形

ctx.moveTo(10,10);

ctx.lineTo(100,30);

ctx.lineTo(120,80);

ctx.lineTo(60,60);

ctx.lineTo(10,10);

ctx.closePath();  //闭合多边形路线

ctx.stroke();  //描边

ctx.fill();    //填充

Canvas入门(二)
矩形的绘图1共有多个口令,分别是 ctx.fillRect(x, y, width, height) 和
ctx.strokeRect(x, y, width, height) ,参数中的 x 和 y 仍然…

<canvas>标签是h五新增的,通过脚本(平时是js)来绘制图形,canvas只是2个图纸容器,或然说是画布。

什么是 Canvas?

HTML伍<canvas> 元素用于图形的绘图,通过脚本
(常常是JavaScript)来完成.

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

你能够透过多样艺术运用Canva绘制路径,盒、圆、字符以及丰盛图像。


一.中坚步骤

0.概念2个画布,设置长度宽度。

<canvas id=”myCanvas” width=”200″ height=”300″><canvas>

壹.第3找到canvas成分

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

2.创建context对象

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

3.制图一个切实的图形,如下绘制三个颜色为#fff000的星型

ctx.fillStyle = “#fff000”;

ctx.fillRect(0,0,150,75);

canvas可以绘制路径、图形、字以及丰盛图像。

浏览器援救

4858美高梅 14858美高梅 24858美高梅 34858美高梅 44858美高梅 5

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

**注意: Internet
Explorer 八 及更早 IE 版本的浏览器不帮忙 <canvas> 成分.**


2.方法

fill():填充

stroke():描边


4858美高梅 6

成立一个画布(Canvas)

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

**注意: 暗中认可景况下
<canvas> 成分未有边框和内容。**

<canvas>不难实例如下:

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

**注意: 标签平常须要钦定1个id属性
(脚本中常常引用), width 和 height 属性定义的画布的大小.**

**提示:您能够在HTML页面中使用四个<canvas> 成分.**

利用
style 属性来添加边框:

二.采用场景

2、创制三个画布

实例

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


1.canvas –路径

moveTo(x,y);定义线条开头的坐标

lineTo(x,y):定义线条截至的坐标

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

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

ctx.moveTo(100,100);

ctx.lineTo(100,200);

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

运用 JavaScript 来绘制图像

canvas
成分本身是绝非绘图能力的。全数的绘图工作必须在 JavaScript
内部形成:

2.canvas — 圆形

arc( x, y, r, start,stop,[true/false]);

x,y: 坐标原点

r:半径

start,stop:起先角度到甘休角度

true/false:顺/逆时针

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

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

ctx.beginPath();

ctx.arc(95,50,30,0,2*Math.PI);

ctx.stroke();

canvas中须要钦点3个id属性供脚本引用,width和height定义画布的分寸。此外能够用style来添加画布边框。

实例

<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(“二d”)
对象是内建的 HTML5对象,拥有二种绘制路径、矩形、圆形、字符以及足够图像的法子。

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

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

设置fillStyle属性能够是CSS颜色,渐变,或图案。fillStyle
默许设置是#000000(黑色)。

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


3.canvas — 文本

font : 定义字体(字体,大小)

fillText: 绘制实心的文书

strokeText:绘制空心的公文

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

Canvas 坐标

canvas
是一个2维网格。

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

上边的
fillRect 方法拥有参数 (0,0,150,7伍)。

趣味是:在画布上制图
150×7五 的矩形,从左上角开首 (0,0)。

坐标实例

一般来说图所示,画布的
X 和 Y
坐标用于在画布上对绘画进行定位。鼠标移动的矩形框上,突显定位坐标。

X

Y

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


4.canvas — 渐变

线条渐变:createLinearGradient(x,y,x1,y1);

通往渐变:createRadialGradient(x,y,r,x1,y一,r一);

addColorStop():钦点颜色截至,能够运用坐标,日常0-1

线条渐变

//成立渐变

var grd= ctx.createLinearGradient(0,0,200,0);

grd.addColorStop(0,”red”);

grd.addColorStop(1,”white”);

//填充渐变

ctx.fillStyle = grd;

ctx.fillRect(10,10,150,80);

三、使用js绘制图像

Canvas – 路径

在Canvas上画线,大家将应用以下二种办法:

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

绘制线条大家必须利用到
“ink” 的措施,就像是stroke().

5.canvas — 图像

drawImage(image,x,y);

canvas自身没有绘图能力,全体的绘图工作务必在js内部形成:

实例

概念初步坐标(0,0),
和得了坐标 (200,十0). 然后使用 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成分:

实例

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


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

Canvas – 文本

运用
canvas 绘制文本,重要的习性和措施如下:

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

使用
fillText():

附带创立context对象(getContext(“二d”)对象是内建的H伍对象,拥有四种制图图形方法):

实例

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

JavaScript:

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

使用
strokeText():

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

实例

使用
“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渐变:

  • createLinearGradient(x,y,x1,y1) –
    创设线条渐变
  • createRadialGradient(x,y,r,x1,y1,r1) –
    创制1个通往/圆渐变

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

addColorStop()方法钦点颜色甘休,参数使用坐标来讲述,能够是0至一.

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

使用
createLinearGradient():

ctx.fillStyle=”#FF0000″;    //
fillStyle能够是css颜色,渐变,或图案,暗许设置是葡萄紫(#000000)

实例

始建3个线性渐变。使用渐变填充矩形:

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

概念矩形:

实例

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

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


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

Canvas – 图像

把1幅图像放置到画布上,
使用以下方式:

  • drawImage(image,x,y)

4、Canvas坐标

行使图像:

4858美高梅 7

canvas是1个贰维网格。cancas的左上角坐标为(0,0),上面的fillRect方法的参数(0,0,150,70)意思便是从左上角(0,0)初步在画布上绘制三个150*70的矩形。

实例

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

JavaScript:

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

Canvas,html伍canvas canvas
标签定义图形,比如图片和其余图像,您必须选拔脚本来绘制图形。
在画布上(Canvas)画二个革命矩形,渐变矩…

5、Canvas路径

画线:

beginPath();新建一条路子

moveTo(x,y);定义线条起始坐标

lineTo(x,y);定义线条停止坐标

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

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

fill();通过填写路径的剧情区域转变实心的图形

实例:

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

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

ctx.moveTo(0,0);

ctx.lineTo(200,100);

ctx.stroke();

画圆:

1、arc(x1,y1,x2,y2,radius);

根据给定的控制点和半径画圆弧

ctx.arc(95,50,40,0,2*Math.PI);

2、arc(x,y,r,startAngle,endAngle,anticlockwise);

以(x,y)为圆心,r为半径,从startAngle弧度开头到endAngle弧度结束。anticlockwise为true表示逆时针,false为顺时针

0弧度指x轴正方向  ,角度转换到弧度:(Math.PI/180)*degrees

ctx.arc(50,50,40,0,Math.PI/2,false);

4858美高梅 8

4858美高梅 9

4858美高梅 10

4858美高梅 11

arcTo主意的证实:

​ 这么些点子能够如此敞亮。绘制的半圆形是由两条切线所决定。

​ 第 一 条切线:伊始点和决定点一决定的直线。

​ 第 2 条切线:控制点1 和决确定地点2决定的直线。

​ 其实绘制的弧形正是与那两条直线相切的拱形。

 贝塞尔曲线请自行上网找寻。

6.canvas文本

4858美高梅 ,font定义字体

fillText(text,x,y)绘制实心文本

strokeText(text,x,y) 绘制空心文本

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

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

ctx.font=”30px Arial”;

ctx.fillText(“Hello World”,10,50);

 4858美高梅 12

7、canvas渐变

createLinearGradient(x,y,x1,y一)创制线条渐变

createRadialGradient(x,y,r,x一,y壹,r壹)创制贰个朝向/圆渐变

addColorStop()钦命颜色停止,参数使用坐标描述,能够是0至壹

线性:

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

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

//
成立渐变

var grd=ctx.createLinearGradient(0,0,200,0);

grd.addColorStop(0,”red”);

grd.addColorStop(1,”white”);

//
填充渐变

ctx.fillStyle=grd;

ctx.fillRect(10,10,150,80);

 径向:

//
成立渐变

var grd=ctx.createRadialGradient(75,50,5,90,60,100);

grd.addColorStop(0,”red”);

grd.addColorStop(1,”white”);

//
填充渐变

ctx.fillStyle=grd;

ctx.fillRect(10,10,150,80);

 8、canvas图像

drawImage(image,x,y);

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

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

var img=document.getElementById(“scream”);

或者 var img=new
Image();

img.src=”flower.png”;

 

ctx.drawImage(img,10,10);

 玖、添加样式和颜料

fillStyle =color  设置图形填充颜色

strokeStyle=color 设置图形轮廓颜色

 10、变形

translate(x,y)用来移动canvas的原点到内定的义务

rotate(angle)旋转坐标轴(angle为顺时针方向,弧度为单位,旋转中央为坐标原点)

1一、同二个画布怎么着只改变个中一条线的水彩:(先保存线条在涂色,然后restore到上1状态)

function arrow2(canId, ox, oy, x1, y1, x2, y2,color) {
//参数表达 canvas的 id ,原点坐标 第四个端点的坐标,第3个端点的坐标
var sta = new Array(x1, y1);
var end = new Array(x2, y2);

var canvas = document.getElementById(canId);
if(canvas == null) return false;
var ctx = canvas.getContext(‘2d’);

//画线
ctx.beginPath();
ctx.translate(ox, oy); //坐标起点
ctx.moveTo(sta[0], sta[1]);
ctx.lineTo(end[0], end[1]);
ctx.save();
ctx.strokeStyle=color;//线条颜色
ctx.fillStyle = color;//箭头颜色
ctx.fill();
ctx.stroke();

//画箭头
ctx.translate(end[0], end[1]);
//作者的箭头本垂直向下,算出直线偏离Y的角,然后旋转
,rotate是顺时针旋转的,所以加个负号
var ang = (end[0] – sta[0]) / (end[1] – sta[1]);
ang = Math.atan(ang);
if(end[1] – sta[1] >= 0) {
ctx.rotate(-ang);
} else {
ctx.rotate(Math.PI – ang); //加个180度,反过来
}
ctx.lineTo(-5, -10);
ctx.lineTo(0, -5);
ctx.lineTo(5, -10);
ctx.lineTo(0, 0);
ctx.fill(); //箭头是个封闭图形
ctx.restore();
//复苏到堆的上三个场合
ctx.closePath();
}

 画布倘诺与div或别的块标签争辩,能够让画布背景变透明加style如下:

<canvas id=”Canvas一” width=”140″ height=”400″ style=”background:
rgba(25伍,255,155,0); position: absolute;left: 130px; z-index:
-1″>你的浏览器不援助canvas,请升级你的浏览器</canvas>

 z-index代表叠加顺序。

别的详细:

 

发表评论

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

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有