canvas基础语法

2018-06-24 00:02:15来源：未知阅读 ()

前面的话

　　canvas顾名思义是定义在浏览器中的画布。它不仅是一个普通的元素，更是一个强大的编程工具。它的出现已然超过了web基于文档的设计初衷，将网页这一形态的应用推向了另一个高度。利用canvas，可以开发出复杂的动画、动态图表、游戏等。关于canvas，有这样一句话——canvas就像是一场文艺复兴，将编程工作者彻底释放出创造力。本文将详细介绍canvas基础知识

添加canvas

　　在HTML中添加Canvas非常简单，只需要在HTML的<body>部分，添加上<canvas>标签就可以了

<canvas>
    <p>The canvas element is not supported!</p>
</canvas>

　　现在，页面是一个完完全全的空白页面。Canvas的本意是画布，画布在HTML5中是透明的，是不可见的

【HTML属性】

　　在网页上使用canvas元素时，它会创建一块矩形区域。默认情况下，canvas的宽为300px，高为150px

　　canvas支持HTML属性高度height和宽度width，可以在开始和结束标签之间加入HTML来提供后备内容

height    高度
width     宽度

<canvas width="600" height="300">
    <p>The canvas element is not supported!</p>
</canvas>

　　[注意]重置canvas的宽或高可以达到清空画布的效果

【CSS样式】

　　同大多数HTML元素一样，canvas元素也可以通过应用CSS的样式来增加边框，设置内外边距等。而且一些CSS属性还可以被canvas内的元素继承。比如字体样式，在canvas内添加的文字，默认同canvas元素本身是一样的。此外，在canvas中为绘图上下文设置属性同样要遵循CSS语法

　　[注意]通过CSS样式设置的宽高，是canvas元素的实际占据宽高；通过属性值设置的宽度，是canvas内部编程的设置宽高；如果没有通过CSS样式设置宽度，则canvas元素实际占据宽高等于内容编程设置宽度

　　如果按照如下进行设置，则canvas的最终宽高为400*100，相当于内部元素宽度缩小2.5倍，高度缩小2倍

    canvas.width = 1000;
    canvas.height = 200;
    canvas.style.width = '400px';  
    canvas.style.height = '100px';

　　如果按照如下进行设置，则canvas的最终宽高为400*40，相当于内部元素宽度和高度等比例缩小2.5倍

    canvas.width = 1000;
    canvas.height = 200;
    canvas.style.width = '400px';

绘图上下文

　　要在canvas上绘图，需要以下三个步骤

　　1、布置画布：通过添加<canvas>标签，添加canvas元素

　　2、获取画布：通过<canvas>标签的id，获得canvas对象

　　3、取得绘图上下文：通过canvas对象的getContext("2d")方法，获得2D环境；如果要获取三维上下文，使用"webgl"

　　上面的三个步骤对应如下代码

<canvas id=“canvas”></canvas>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d")

【canvas坐标】

　　使用2D上下文提供的方法可以绘制简单的2D图形，比如矩形、弧线和路径。2D上下文坐标开始于canvas元素的左上角，原点坐标是(0,0)。所有坐标值都基于这个原点计算，x值越大表示越靠右，y值越大表示越靠下。默认情况下，width和height表示水平和垂直两个方向上可用的像素数目

填充和描边

　　2D上下文的两种基本绘图操作是填充和描边

　　填充是指用指定的样式(颜色、渐变和图像)填充图形；描边是只在图形的边缘画线

　　大多数2D上下文操作都会细分为填充和描边两个操作，而操作的结果取决于两个属性:fillStyle和strokeStyle。这两个属性的值可以是字符串表示的颜色、渐变对象或模式对象，它们的默认值都是#000

var context = drawing.getContext('2d');
context.strokeStyle="red";
context.fillStyle="#00f";

　　关于渐变和模式对象，稍后介绍

绘制矩形

　　下面先从最简单的矩形绘制开始说起，矩形是唯一一种可以直接在2D上下文中绘制的形状，与矩形相关的方法包括fillRect()、strokeRect()、clearRect()。这三个方法都能接收4个参数：矩形的x坐标、矩形的y坐标、矩形宽度和矩形高度。这些参数的单位都是像素

fillRect(x,y,w,h):画布上绘制的矩形会填充通过fillStyle属性指定的颜色
strokeRect(x,y,w,h):画布上绘制的矩形会使用通过strokeStyle属性指定描边颜色    
clearRect(x,y,w,h):用于清除画布上的矩形区域。本质上这个方法可以把绘制上下文中的某一矩形区域变透明。通过绘制形状然后再清除指定区域，就可以生成有意思的效果

　　下面来绘制一个背景颜色为红色，尺寸为100*100，位置为(0,0)点的矩形

<canvas id="drawing" style="border:1px solid black">
    <p>The canvas element is not supported!</p>
</canvas>
<script>
var drawing = document.getElementById('drawing');
//确定浏览器支持<canvas>元素
if(drawing.getContext){
    var context = drawing.getContext('2d');
    context.fillRect(0,0,100,100);
    context.fillStyle = 'red';
} 
</script>

　　结果如下，背景颜色为黑色。这是因为，使用fillRect()方法时，会使用当前的fillStyle值。由于当前还没有设置，所以会使用默认的黑色值

　　进行如下修改后，结果符合预期

<script>
var drawing = document.getElementById('drawing');
if(drawing.getContext){
    var context = drawing.getContext('2d');
　　 context.fillStyle = 'red';
　　 context.fillRect(0,0,100,100);
}
</script>

　　下面来绘制一个半透明的蓝色描边矩形，尺寸为100*100，位置在(0,0)点

<script>
var drawing = document.getElementById('drawing');
if(drawing.getContext){
    var context = drawing.getContext('2d');
　　 context.strokeStyle = 'rgba(0,0,255,0.5)';
　　 context.strokeRect(0,0,100,100);
}
</script>

　　接下来，在(0,0)点绘制尺寸为100*100背景为半透明红色的矩形， 1s后在(50,50)点绘制尺寸为100*100，描边为半透明蓝色的矩形，1s后使用clearRect()清除矩形

<canvas id="drawing" style="border:1px solid black">
    <p>The canvas element is not supported!</p>
</canvas>
<script>
var drawing = document.getElementById('drawing');
if(drawing.getContext){
    var context = drawing.getContext('2d');
    context.fillStyle = 'rgba(255,0,0,0.5)';
    context.fillRect(0,0,100,100);
    setTimeout(function(){
      context.strokeStyle = 'rgba(0,0,255,0.5)';
      context.strokeRect(50,50,100,100);  
    },1000);
    setTimeout(function(){
      context.clearRect(0,0,300,150);
    },2000);    
} 
</script>

绘制文本

　　绘制文本主要有两个方法：fillText()和strokeText()，fillText()方法使用fillStyle属性绘制文本，strokeText()方法使用strokeStyle属性为文本描边

　　这两个方法都可以接收4个参数：要绘制的文本字符串、x坐标、y坐标和可选的最大像素宽度

　　若传入的字符串大于最大宽度时，则绘制的文本字符的高度正确，而宽度会收缩以适应最大宽度。而且这两个方法都以下列3个属性为基础：font、textAlign、textBaseline

font(与font集合样式写法相同)
textAlign(start\end\center)不建议使用left\right，默认为start
textBaseline(top\hanging\middle\alphabetic\ideographic\bottom)，默认为alphabetic

【measureText()】

　　由于绘制文本比较复杂，特别是需要把文本控制在某一区域的时候，因此提供了辅助确定文本大小的方法measureText()方法。该方法接收一个参数，即要绘制的文本，返回一个TextMetrics对象，该对象只有一个width属性。measureText()方法利用font、textAlign、textBaseline的当前值计算指定文本的大小

　　假设想在一个100px宽的矩形区域中绘制文本"小火柴"，下面代码从50px字体大小开始递减，最终会找到合适的字体大小

<script>
var drawing = document.getElementById('drawing');
if(drawing.getContext){
    var context = drawing.getContext('2d');
    var fontSize = 50;
    context.font= fontSize + 'px arial';
    while(context.measureText('小火柴').width > 100){
        fontSize--;
        context.font= fontSize + 'px arial';
    }
    context.fillText('小火柴',10,30);
    context.fillText('字体大小是' + fontSize + 'px' ,10,80);    
} 
</script>

描边线条

　　关于描边线条有4个常用属性分别是lineWidth、lineCap、lineJoin和miterLimit

lineWidth：描边线条宽度(默认为1)
lineCap：描边线条末端形状是平头、圆头还是方头(butt、round、square)(默认为butt)
lineJoin：描边线条相交方式是圆交、斜交还是斜接(round、bevel、miter)(默认为miter)
miterLimit：描边线条的最大斜接长度

　　斜接长度是指两条交汇处内角和外角之间的距离，边角的角度越小，斜接长度就越大，为了避免斜接长度过长，可以使得miterLimit属性，如果斜接长度超过miterLimit的值，边角会以lineJoin的"bevel"类型来显示

　　[注意]只有当lineJoin属性为"miter"时，miterLimit才有效

渐变

　　填充和描边除了可以取颜色值之外，还可以取渐变值，渐变由canvasGradient实例表示

【创建渐变】

　　渐变分为线性渐变和径向渐变

　　调用createLinearGradient()方法创建线性渐变，这个方法接收4个参数：起点的x坐标、y坐标，终点的x坐标、y坐标

　　调用createRadialGradient()方法创建径向渐变，这个方法接收6个参数，对应两个圆的圆心和半径。前三个参数指定起点圆的圆心(x和y)及半径。后三个参数指定终点圆的圆心(x和y)及半径。可以把径向渐变想象成一个长圆桶，而这6个参数定义的正是这个桶的两个圆形开口的位置

　　[注意]如果想从某个形状的中心点开始创建一个向外扩散的径向渐变效果，要将两个圆定义为同心圆

【指定色标】

　　接下来使用addColorStop()方法来指定色标。这个方法接收两个参数：色标位置和CSS颜色值。色标位置是一个0(开始的颜色)到1(结束的颜色)之间的数字

　　最后将渐变对象实例赋值给fillStyle或strokeStyle，进而可以绘制图形

　　下面来创建一个垂直方向的从品红到浅蓝色的线性渐变

<canvas id="drawing" style="border:1px solid black">
    <p>The canvas element is not supported!</p>
</canvas>
<script>
var drawing = document.getElementById('drawing');
if(drawing.getContext){
    var context = drawing.getContext('2d');
    var linearGradient = context.createLinearGradient(0,0,0,100);    
    linearGradient.addColorStop(0,'pink');
    linearGradient.addColorStop(1,'lightblue');
    context.strokeStyle = linearGradient;
    context.fillStyle = linearGradient;
    context.fillRect(10,10,100,100);
    context.strokeRect(120,10,100,100);
    context.font="20px/50px 宋体";
    context.textAlign = 'end';
    context.textBaseline = 'top';
    context.strokeText("小火柴",290,10);    
} 
</script>

　　下面来创建一个从品红到浅蓝色的径性渐变

<canvas id="drawing" style="border:1px solid black">
    <p>The canvas element is not supported!</p>
</canvas>
<script>
var drawing = document.getElementById('drawing');
if(drawing.getContext){
    var context = drawing.getContext('2d');
    var radialGradient = context.createRadialGradient(50,50,0,50,50,50);    
    radialGradient.addColorStop(0,'pink');
    radialGradient.addColorStop(1,'lightblue');
    context.fillStyle = radialGradient;
    context.fillRect(0,0,100,100);    
} 
</script>

绘制路径

　　绘制路径包括开始绘制、实际绘制和结束绘制三个步骤

【开始绘制】

　　要绘制路径，首先必须调用beginPath()方法，表示要开始绘制新路径

　　[注意]beginPath()之后的strokeStyle或fillStyle用于当前路径

【实际绘制】

　　实际绘制路径时可以使用以下方法：

　　1、moveTo(x,y)：将绘图游标移动到(x,y)，不画线。如果其他方法需要使用上一点的坐标，一定要先使用moveTo(x,y)确定坐标

context.moveTo(100,100)

　　表示移动画笔至(100,100)这个点（单位是px）

　　2、lineTo(x,y)：从上一点开始绘制一条直线，到(x,y)为止

context.lineTo(600,600)

　　表示从上一笔的停止点绘制到(600,600)

　　3、arcTo(x1,y1,x2,y2,radius)：从上一点开始绘制一条弧线到(x2,y2)为止，并以给定半径radius穿过(x1,y1)

context.arcTo(30,80,100,100,60);

　　表示从上一点开始绘制一条弧线到(100,100)为止，该弧线穿过(30,80)，且半径为60

　　4、arc(x,y,radius,startAngle,endAngle,counterclockwise)：以(x,y)为圆心绘制一条弧线，弧线半径为radius，起始和结束角度(用弧度表示)分别为startAngle和endAngle。最后一个参数表示startAngle和endAngle是否按逆时针方向计算。默认值为false表示按顺时针方向计算

context.arc(50,50,40,0,2*Math.PI,false);

　　表示以(50,50)为圆心绘制一条弧线，半径为40，起始和结束角度分别为0和2PI，按顺时针方向计算

　　5、bezierCurveTo(c1x,c1y,c2x,c2y,x,y)：从上一点开始绘制一条曲线，到(x,y)为止，并且以(c1x,c1y)和(c2x,c2y)为控制点

context.bezierCurveTo(0,50,100,50,100,0);

　　表示从上一点开始绘制一条曲线，到(100,0)为止，并且以(0,50)和(100,50)为控制点

　　6、quadraticCurveTo(cx,cy,x,y)：从上一点开始绘制一条二次曲线，到(x,y)为止，并且以(cx,cy)为控制点

context.quadraticCurveTo(50,50,0,100);

　　表示从上一点开始绘制一条二次曲线，到(0,100)为止，并且以(50,50)为控制点

　　7、rect(x,y,width,height)：从点(x,y)开始绘制一个矩形，宽度和高度分别由width和height指定。这个方法绘制的是矩形路径，而不是strokeRect()和fillRect()所绘制的独立的形状

context.rect(20,20,50,50);

　　表示从(20,20)开始绘制一个矩形，宽高分别是50和50

【结束绘制】

　　创建路径后有以下4种选择

　　1、用fillStyle填充，调用fill()方法

　　2、用strokeStyle描边，调用stroke()方法

　　[注意]如果fill()和stroke()同时使用，应该先使用fill()，后使用stroke()。否则，fill()会覆盖stroke()的部分线条宽度

　　3、在路径上创建一个剪切区域，调用clip()方法

　　[注意]canvas中的clip()方法用于从原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切区域内(不能访问画布上的其他区域)。也可以在使用clip()方法前通过使用save()方法对当前画布区域进行保存，并在以后任意时间通过restore()方法对其进行恢复。可以使用clip()实现类似于探照灯效果

　　4、绘制一条连接到路径起点的线条，调用closePath()方法

　　在2D绘图上下文中，路径是一种主要的绘图方式，因为路径能为要绘制的图形提供更多控制。由于路径的使用很频繁，所以有一个isPointInPath()方法，接收x和y坐标作为参数，用于在路径被关闭之前确定画布上的某一点是否位于路径上

if(context.isPointInPath(100,100)){
    console.log('this point is in the path');
}

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：EasyUi控件Datagrid

下一篇：js获得时间new Date()整理

javascript面向对象入门基础详细介绍 2020-03-29
浅谈JS的基础类型与引用类型 2020-02-29
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法 2020-02-07
javascript setinterval 的正确语法如何书写 2019-12-08
jQuery语法总结和注意事项 2019-10-16

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签