HTML5新增基本工具,怎么着行使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()开启绘制路径,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();

HTML5新增基本工具,怎么着行使canvas绘图。    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|alphabetic|ideographic|bootom  默许为alphabetic

大家有趣味自己试试吧。

 

图片绘制:

呼…..写了半天终于写到正题了,相对于地点简单图形的绘图,图片绘制要用的越来越多一些,尤其是在玩乐中。

那里介绍一种较简单的主意,首先在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…

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达成绘制。

2、创制一个画布

图像


动态生成 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>

文字


文字)
的职责设定相对复杂,不像矩形、图像一样有个稳定的左上角坐标,也不像圆一样有定位的圆心。文字的岗位设置也是一个近乎
(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”; // 默认值为 alphabetic 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中必要指定一个id属性供脚本引用,width和height定义画布的高低。其余可以用style来添加画布边框。

其他 API


属性:

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

方法:

  • clearRect: 清除某有些(矩形区域)画布
    ctx.clearRect(0, 0, 100, 100)
  • measureText:
    总结文本对象的宽窄
  • translate
  • rotate

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

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

Read More


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

    1 赞 3 收藏
    评论

亚洲必赢官网 4

2.2 canvas的一部分基本特性

3、使用js绘制图像

率先得说下width和height属性了,那是在canvas中不可或缺的属性。

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

width:画布的冲天。和一幅图像一样,这一个特性能够指定为一个平头像素值或者是窗口中度的比重。当这几个值改变的时候,在该画布上一度完成的其余绘图都会擦除掉。;默许值是
300。

首先找到canvas元素:

height:画布的涨幅。和一幅图像一样,这些特性可以指定为一个平头像素值或者是窗口宽度的比例。当那几个值改变的时候,在该画布上一度做到的其余绘图都会擦除掉。默许值是
width的一半。

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

123

其次创造context对象(getContext(“2d”)对象是内建的H5对象,拥有多种绘制图形方法):

怎么着行使dom绘出一些简练的图

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

在那里就须要动用一些性能:

安装填充图形的颜色:

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

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是一个二维网格。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”);

beginPath();新建一条路径

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();通过线条来绘制图形轮廓

line-width:表示边框宽度

fill();通过填写路径的始末区域变化实心的图片

canvas里面还是能添加一些文本属性,比如说font,textAlign,textBaseline等等

实例:

demo2制作渐变矩形框

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

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

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

var demo2=b.getContext(“2d”);

ctx.moveTo(0,0);

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

ctx.lineTo(200,100);

gradient.addColorStop(“0″,”#FFF”);

ctx.stroke();

gradient.addColorStop(“0.5″,”blue”);

画圆:

gradient.addColorStop(“1.0″,”red”);

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

// 用渐变举行填空

基于给定的控制点和半径画圆弧

demo2.strokeStyle=gradient;

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

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

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

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

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

demo3 使用font, textAlign属性

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

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

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

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

亚洲必赢官网 5

// 在岗位 150 创造蓝线

亚洲必赢官网 6

ctx.strokeStyle=”blue”;

亚洲必赢官网 7

ctx.moveTo(150,20);

亚洲必赢官网 8

ctx.lineTo(150,170);

arcTo办法的辨证:

ctx.stroke();

​ 那一个方式可以那样敞亮。绘制的半圆形是由两条切线所主宰。

ctx.font=”15px Arial”;

​ 第 1 条切线:开头点和控制点1决定的直线。

// 突显分歧的 textAlign 值

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

ctx.textAlign=”start”;

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

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

 贝塞尔曲线请自行上网搜索。

ctx.font=”40px Arial”;

6.canvas文本

ctx.textAlign=”end”;

font定义字体

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

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

ctx.textAlign=”left”;

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

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

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

ctx.textAlign=”center”;

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

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

ctx.font=”30px Arial”;

ctx.textAlign=”right”;

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

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

 亚洲必赢官网 9

2.3 canvas中的一些常用方法

7、canvas渐变

1).lineTo():添加一个新点,然后在画布中开创从该点到结尾指定点的线条

createLinearGradient(x,y,x1,y1)创立线条渐变

2).moveTo():把路子移动到画布中的指定点,不创立线条

createRadialGradient(x,y,r,x1,y1,r1)创立一个朝着/圆渐变

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

addColorStop()指定颜色截止,参数使用坐标描述,可以是0至1

demo4 canvas突显路径;

线性:

var canvas = document.getElementById(‘myCanvas’);
//获取上下文对象,canvas很多常用方法都是基于这么些目的完毕的

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

var context = canvas.getContext(“2d”); //方今参数只有2d

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

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

//
成立渐变

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

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

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

grd.addColorStop(0,”red”);

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

grd.addColorStop(1,”white”);

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

//
填充渐变

4).beginPath():先导一条途径,或重置当前路线

ctx.fillStyle=grd;

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

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

6).closePath():创制从眼前点回来起先点的途径

 径向:

demo5.绘制三角形

//
创建渐变

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

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

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

grd.addColorStop(0,”red”);

ctx.beginPath();

grd.addColorStop(1,”white”);

ctx.moveTo(20,20);

//
填充渐变

ctx.lineTo(20,100);

ctx.fillStyle=grd;

ctx.lineTo(70,100);

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

ctx.closePath();

 8、canvas图像

ctx.stroke();

drawImage(image,x,y);

3.科普问题

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

图像能无法松开canvas上?

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

4.化解方案

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

可透过利用drawImage(image,x,y)就足以将图像放到canvas上,然后在canvas内安装宽高,就可以将图像放到画布中。

或者 var img=new
Image();

demo6.利用canvas渲染图片

img.src=”flower.png”;

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

 

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

ctx.drawImage(img,10,10);

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

 9、添加样式和颜料

img.onload = function() {

fillStyle =color  设置图形填充颜色

ctx.drawImage(img,0,0);

strokeStyle=color 设置图形概况颜色

}

 10、变形

5.编码实战

translate(x,y)用来移动canvas的原点到指定的职责

6.扩张思考

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

在上个demo中发觉只要设置canvas标签css的width,height与在canvas中装置width,height不一致,那是为啥?

11、同一个画布怎么样只变动其中一条线的颜料:(先保存线条在涂色,然后restore到上一气象)

可观和幅度是用以绘图的逻辑帆布尺寸和是差其余相距style.height和style.widthCSS属性。如若不安装CSS属性,画布的本征大小将被看做突显大小;
若是设置CSS属性,并且它们与画布尺寸差别,则您的情节将在浏览器中缩放。

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

7.参考文献

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

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

//画线
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();

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

//画箭头
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();
}

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

 画布如果与div或其余块标签冲突,可以让画布背景变透明加style如下:

8.越来越多研究

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

1.canvas可以使图像爆发放大缩短效果啊?

 z-index代表叠加顺序。

2.canvas元素内部的width和height属性能使用rem单位吗?

此外详细:

 

网站地图xml地图