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

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

    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只是一个图形容器,或者说是画布。

最新标准:http://www.w3.org/TR/2dcontext/

矩形


实心:

// 填充色 (默认为黑色) 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可以绘制路径、图形、字以及添加图像。

稳定版本的标准:http://www.w3.org/TR/2013/CR-2dcontext-20130806/

圆形


实心:

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

?{s��vh�^d

线段


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>

01、

文字


文字) 的位置设定相对复杂,不像矩形、图像一样有个固定的左上角坐标,也不像圆一样有固定的圆心。文字的位置设置也是一个类似 (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来添加画布边框。

用JavaScript创建img对象

其他 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绘制图像

var img = document.getElementById("imgId");

首先得说下width和height属性了,这是在canvas中必备的属性。

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

第二种方式:

width:画布的高度。和一幅图像一样,这个属性可以指定为一个整数像素值或者是窗口高度的百分比。当这个值改变的时候,在该画布上已经完成的任何绘图都会擦除掉。;默认值是 300。

首先找到canvas元素:

var img = new Image();//这个就是img标签的dom对象

height:画布的宽度。和一幅图像一样,这个属性可以指定为一个整数像素值或者是窗口宽度的百分比。当这个值改变的时候,在该画布上已经完成的任何绘图都会擦除掉。默认值是 width的一半。

var  can=document.getElementById("can");

img.src = "imgs/arc.gif";

123

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

img.alt = "文本信息";

如何利用dom绘出一些简单的图

var  ctx=can.getContext("2d");

img.onload = function() {

在这里就需要用到一些属性:

设置填充图形的颜色:

//图片加载完成后,执行此方法

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

ctx.fillStyle="#FF0000";    // fillStyle可以是css颜色,渐变,或图案,默认设置是黑色(#000000)

}

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

定义矩形:

2.1.1 canvas标签语法和属性 (重点)

demo1 制作渐变矩形

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

canvas:画布油布的意思 英 ['kænvəs] 美 ['kænvəs]

var a=document.getElementById("myCanvas");

4、Canvas坐标

标签名:canvas,双标签,需要闭合。

var demo1=a.getContext("2d");

canvas是一个二维网格。cancas的左上角坐标为(0,0),上面的fillRect方法的参数(0,0,150,70)意思就是从左上角(0,0)开始在画布上绘制一个150*70的矩形。

单位: px,可以设置width和height属性,否则忽略单位。

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

5、Canvas路径

width和hegiht:默认300*150像素

my_gradient.addColorStop(0,"red");

画线:

注意:

my_gradient.addColorStop(1,"blue");

beginPath();新建一条路径

不要用CSS控制它的宽和高,会导致内部图片被拉伸,

demo1.fillStyle=my_gradient;

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

重新设置canvas标签的宽高属性会让画布擦除所有的内容,

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

lineTo(x,y);定义线条结束坐标

可以给canvas画布设置背景色

strokeStyle:设置或返回用于笔触的颜色、渐变或模式。

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

2.1.2 浏览器不兼容处理(重点)

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

stroke();通过线条来绘制图形轮廓

ie9以上才支持canvas, 其他chrome、Safari、Opera等都支持

line-width:表示边框宽度

fill();通过填充路径的内容区域生成实心的图形

只要浏览器兼容canvas,那么就会支持绝大部分api(个别最新api除外)

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

实例:

移动设备几乎支持Canvas的所有API

demo2制作渐变矩形框

var  can=document.getElementById("can");

2d的支持的都非常好,3d(webgl)ie11才支持,其他都支持

var b=document.getElementById("myCanvas");

var  ctx=can.getContext("2d");

如果浏览器不兼容,最好进行友好提示, 例如:

var demo2=b.getContext("2d");

ctx.moveTo(0,0);

你的浏览器不支持canvas,请升级浏览器.浏览器不支持,显示此行文本

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

ctx.lineTo(200,100);

如果浏览器不兼容,可以使用flash等方式进行替换。

本文由必威发布于必威-前端,转载请注明出处:接下来我们从一些最简单的图形开始绘制,canv

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。