logo

Timeless

花开成景，花落成诗

神奇的canvas

神奇的canvas

四月 3, 2019 83 2377 6 分钟
js

canvas 标签使用 JavaScript 在网页上绘制图像，拥有多种绘制路径、矩形、圆弧、字符以及添加图像的方法。

1. 什么是canvas:

是HTML5提供的一种新标签

<canvas></canvas>

  • canvas是一个矩形区域的画布，可以用JavaScript在上面绘画。
  • canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。
  • canvas 拥有多种绘制路径、矩形、圆弧、字符以及添加图像的方法。
  • HTML5之前的web页面只能用一些固定样式的标签：比如p、div、h1等，但有了canvas Web页面可以可以丰富多彩。

1.1.canvas主要应用的领域

  1. 游戏：canvas在基于Web的图像显示方面比Flash更加立体、更加精巧，canvas游戏在流畅度和跨平台方面更牛。 
  2. 可视化数据.数据图表话，比如:百度的echart
  3. banner广告：Flash曾经辉煌的时代，智能手机还未曾出现。现在以及未来的智能机时代，HTML5技术能够在banner广告上发挥巨大作用，用Canvas实现动态的广告效果再合适不过。
  4. 未来=> 模拟器：无论从视觉效果还是核心功能方面来说，模拟器产品可以完全由JavaScript来实现。
  5. 未来=> 远程计算机控制：Canvas可以让开发者更好地实现基于Web的数据传输，构建一个完美的可视化控制界面。
  6. 未来=> 图形编辑器：Photoshop图形编辑器将能够100%基于Web实现。
  7. 其他可嵌入网站的内容(多用于活动页面、特效)：类似图表、音频、视频，还有许多元素能够更好地与Web融合，并且不需要任何插件。
  8. 完整的canvas移动化应用

1.2.canvas应用

<!DOCTYPE html>
<html>
<head>
    <title>canvas初体验</title>
</head>
<body>
<canvas id="canvas">
    您的浏览器不支持canvas
</canvas>
<script type="text/javascript">
    var canvas = document.getElementById("canvas");
    canvas.width = 200;
    canvas.height= 300;
    canvas.style.background = "red";
    setTimeout(function(){
        canvas.width = 100;
        canvas.height= 100;
    },2000)
</script>
</body>
</html>

标签名canvas，需要进行闭合。就是一普通的html标签。

跟所有的html标签一样，要写在body标签之内。

注意：

  • 不要用CSS控制它的宽和高,会让图片拉伸，
  • 重新设置canvas标签的宽高属性会让画布擦除所有的内容。
  • 可以给canvas画布通过style属性设置其它属性（背景色， 边框。。。。）
  • width和hegiht：默认300*150像素

1.3.getContext("2d");

得到canvas的上下文对象（是所有的绘制操作api的入口或者集合，相当于是得到画布的控制权，之后便可以通过js在画布上画内容了）

后面的参数是字符串的“2d”,2d表示当前的画布支持2D绘图，如果希望将当前画布支持3d，则传入”webgl”

var canvas = document.getElementById("canvas");//获得画布
var ctx = canvas.getContext("2d");//得到canvas的上下文对象（获得画布控制权）

1.4.canvas坐标系

canvas坐标系，从最左上角0,0开始。x向右增大， y向下增大

2.基本的绘制路径

2.1.设置绘制起点(moveTo)

* 语法：ctx.moveTo(x, y);

* 解释：设置上下文绘制路径的起点。相当于移动画笔到某个位置

* 参数：x,y 都是相对于 canvas盒子的最左上角。

* 注意：**绘制线段前必须先设置起点，不然绘制无效。**

2.2.绘制直线(lineTo)

* 语法：ctx.lineTo(x, y);

* 解释：从x,y的位置绘制一条直线到起点或者上一个线头点。

* 参数：x,y 线头点坐标。

* lineWidth 设置路径的宽度

2.3.路径开始和闭合

* 开始路径：ctx.beginPath();

* 闭合路径：ctx.closePath();

* 解释：如果复杂路径绘制，必须使用路径开始和结束。闭合路径会自动把最后的线头和开始的线头连在一起。

* beginPath: 核心的作用是将 不同绘制的形状进行隔离，

  每次执行此方法，表示重新绘制一个路径,跟之前的绘制的墨迹可以进行分开样式设置和管理。

2.4 描边(stroke)

* 语法：ctx.stroke();

* 解释：根据路径绘制线。路径只是草稿，真正绘制线必须执行stroke

ctx.strokeStyle = "red";      
ctx.strokeStyle = "#ccc";      
ctx.strokeStyle = "rgb(255,0,0)";      
ctx.strokeStyle = "rgba(255,0,0,6)";

2.5 填充(fill)

* 语法：ctx.fill();

* 解释：填充，是将闭合的路径的内容填充具体的颜色。默认黑色。

* 注意：交叉路径的填充问题，“非零环绕原则”，顺逆时针穿插次数决定是否填充。

3. 绘制矩形

3.1.快速创建矩形

* 语法：ctx.rect(x, y, width, height);

* 解释：x, y是矩形左上角坐标， width和height都是以像素计

* rect方法只是规划了矩形的路径，并没有填充和描边。

3.2 快速创建描边矩形和填充矩形

* 语法： ctx.strokeRect(x, y, width, height);

   - 参数跟3.1相同，注意此方法绘制完路径后立即进行stroke绘制

* 语法：ctx.fillRect(x, y, width, height);

    - 参数跟3.1相同， 此方法执行完成后。立即对当前矩形进行fill填充。

3.3 清除矩形

* 语法：ctx.clearRect(x, y, width, hegiht);

* 解释：清除某个矩形内的绘制的内容，相当于橡皮擦。

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>擦除效果</title>
</head>
<body>
<canvas id="canvas">
    您的浏览器不支持canvas
</canvas>
<script type="text/javascript">
    var canvas = document.getElementById("canvas");//获得画布
    var ctx = canvas.getContext("2d");//得到canvas的上下文对象（获得画布控制权）
    canvas.width = 500;
    canvas.height= 500;
    canvas.style.background = "red";
    canvas.onmousedown=function(e){
        var x = e.clientX+this.offsetLeft;
        var y = e.clientY+this.offsetTop;
            canvas.onmousemove=function(e){
                var moveX = e.clientX+this.offsetLeft;
                var movey = e.clientY+this.offsetTop;
                ctx.beginPath();
                ctx.fillStyle = "white"
                ctx.fillRect(x,y,moveX-x,movey-y);
            }
            canvas.onmouseup=function(){
                canvas.onmousemove =null;
            }
    }
</script>
</body>
</html>

4. 绘制圆弧

概述：arc() 方法创建弧/曲线（用于创建圆或部分圆）。

语法：ctx.arc(x,y,r,sAngle,eAngle,counterclockwise);

解释：

  • x,y：圆心坐标。
  • r：半径大小。
  • sAngle:绘制开始的角度。 圆心到最右边点是0度，顺时针方向弧度增大。
  • eAngel:结束的角度，注意是弧度。π
  • counterclockwise：是否是逆时针。true是逆时针，false：顺时针
  • 弧度和角度的转换公式： rad = deg*Math.PI/180;
  • 在Math提供的方法中sin、cos等都使用的弧度 

绘制彩色光点：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>绘制彩色光点</title>
</head>
<body>
<canvas id="canvas">
    您的浏览器不支持canvas
</canvas>
<script type="text/javascript">
    var canvas = document.getElementById("canvas");//获得画布
    var ctx = canvas.getContext("2d");//得到canvas的上下文对象（获得画布控制权）
    canvas.width = 500;
    canvas.height= 500;
    canvas.style.background = "white";
    canvas.style.border = "1px solid red"
    canvas.onmousedown=function(e){
        var x = e.clientX+this.offsetLeft;
        var y = e.clientY+this.offsetTop;
            canvas.onmousemove=function(e){
                var moveX = e.clientX+this.offsetLeft;
                var moveY = e.clientY+this.offsetTop;
                ctx.beginPath();
                ctx.arc(x,y,moveX-x,2*Math.PI,false);
                ctx.closePath();
                var color = "rgba("+Math.ceil(Math.random()*255)+","+Math.ceil(Math.random()*255)+","+Math.ceil(Math.random()*255)+",1)";
                ctx.fillStyle = color;
                ctx.fill();
            }
            canvas.onmouseup=function(){
                canvas.onmousemove =null;
            }
    }
</script>
</body>
</html>

绘制饼图：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title></title>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript">
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    canvas.width = 500;
    canvas.height = 500;
    var data = [
        {
            value:0.2,
            color:"red",
            text:"小学生"
        },{
            value:0.1,
            color:"yellow",
            text:"初中生"
        },{
            value:0.3,
            color:"blue",
            text:"高中生"
        },{
            value:0.4,
            color:"pink",
            text:"大学生"
        }
    ];
    var start = 0;
    var end = 0;
    for(var i=0;i<data.length;i++){
        ctx.beginPath();
        end+=data[i].value*Math.PI*2;
        console.log(start)
        ctx.moveTo(250,250);
        ctx.arc(250,250,100,start,end,false);
        ctx.fillStyle = data[i].color;
        console.log(ctx.fillStyle)
        ctx.closePath();
        ctx.stroke()
        ctx.fill();
        start = end;
    }
</script>
</body>
</html>

5. 绘制文字

5.1 绘制填充的文本 

* 语法：ctx.fillText(text,x,y,maxwidth);

* 解释：text是输出的文本， x, y是矩形左上角坐标， maxWidth（可选）允许的最大文本宽度，以像素计

* fillText方法在画布上绘制填色的文本。文本的默认颜色是黑色。

5.2 绘制无填充文本

* 语法：ctx.strokeText(text,x,y,maxwidth);

* 解释：text是输出的文本， x, y是矩形左上角坐标， maxWidth（可选）允许的最大文本宽度，以像素计

* strokeText方法在画布上绘制文本（没有填色）。文本的默认颜色是黑色。

5.3 文字属性

  • font 设置或返回文本内容的当前字体属性

font 属性使用的语法与 CSS font 属性相同。

ctx.font = "18px '微软雅黑'";
  • textAlign 设置或返回文本内容的当前对齐方式

start : 默认。文本在指定的位置开始。

end : 文本在指定的位置结束。

center: 文本的中心被放置在指定的位置。

left : 文本左对齐。

 right : 文本右对齐。

ctx.textAlign = 'left';

  • textBaseline 设置或返回在绘制文本时使用的当前文本基线

alphabetic ： 默认。文本基线是普通的字母基线。

top ： 文本基线是 字符的顶端。。

hanging ： 文本基线是悬挂基线。

middle ： 文本基线是字符的正中。

ideographic： 文本基线是字符基线。

ctx.textBaseline = 'top';

6.绘制图片

6.1.基本绘制图片的方式

* 语法：context.drawImage(img,x,y);

* 解释：x,y 绘制图片左上角的坐标， img是绘制图片的dom对象。

6.2.规定图像的宽度和高度

* 语法：context.drawImage(img,x,y,width,height);   

* 解释：width 绘制图片的宽度，  height：绘制图片的高度

* 如果指定宽高，最好成比例，不然图片会被拉伸

6.3.图片裁剪

* 语法：context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

* 解释：

sx,sy 裁剪的左上角坐标，

swidth：裁剪图片的高度。 sheight:裁剪的高度

其他同6.2

 

等待图片加载完成后绘制

var img = new Image();//这个就是 img标签的dom对象
img.src = "imgs/arc.gif";
img.onload = function() {
   // 图片加载完成后，执行此方法
  context.drawImage(img,x,y);
}

恰饭区

广告位招租

评论

Power by Node.js + Nuxt.js，由 腾讯云 腾讯云提供服务, 已经稳稳地存活了 8年95天

Copyright © 2018 - 2026 Timeless. All rights reserved.桂ICP备18003656号-1公网安备桂公网安备45092102000147号