Canvas画布详解

Canvas画布是HTML5的一种新元素，它可以在网页上动态绘制图像。在初学者掌握Web开发基础知识后，学习Canvas画布成为了曲线救国的最佳途径，因为它可以让你不仅仅掌握Web开发基础，而且还可以用它来创造一些真正的互联网应用。

一、Canvas画布官网

在使用Canvas画布之前，我们需要了解官网上提供的API接口及文档，这有助于我们更好地了解和掌握Canvas的使用方法。


// Canvas画布创建
var canvas = document.createElement("canvas");
document.body.appendChild(canvas);

// Canvas绘制图片
function drawImage(){
  var img = new Image();
  img.addEventListener("load", function(){
    context.drawImage(img, 0, 0);
  }, false);
  img.src = "http://example.com/image.png";
}

Canvas的API很容易理解，不过对于新手来说，最好的方法是看看官网上的文档，以便尽快熟悉它的功能和结构。

二、Canvas清空画布

Canvas可用于绘制各种图形，但是在每次完成绘图后我们需要先清空画布，否则会出现重叠等其他问题。


// 清空整个画布
context.clearRect(0, 0, canvas.width, canvas.height);

// 清空部分画布
context.clearRect(x, y, width, height);

使用clearRect()方法我们可以清空整个画布或者指定绘图区域，以便我们更好地用Canvas绘制我们所需要的图形。

三、Canvas画布截图

Canvas画布截图是将整个Canvas画布的内容保存为一个图片文件，方便我们在需要时保存和分享绘制的图片。


// Canvas画布转换为图片
function canvasToImage(){
  var image = canvas.toDataURL("image/png");
  window.location.href = image;
}

使用Canvas的toDataURL()方法将canvas画布转换成单一文件格式，一般常用的是PNG格式进行保存，如果需要转换成JPEG格式，需要将参数改为”image/jpeg”。

四、Canvas画布默认为什么颜色 & Canvas画布颜色默认是什么

每次创建Canvas画布时，它的默认背景颜色都是黑色，这也是很多绘图软件默认设置的背景颜色。


// 设置画布背景颜色
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
context.fillStyle = "#FFFFFF";
context.fillRect(0, 0, canvas.width, canvas.height);

我们可以使用fillStyle属性将画布的背景颜色设置为我们想要的颜色。

五、Canvas画布案例

使用Canvas画布可实现很多有趣的效果，比如下面的案例就是一个可以自由绘制的画图板：


var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");

var painting = document.querySelector(".painting");
var draw = false;

if(canvas.getContext){
  context.lineWidth = 10;
  context.lineJoin = "round";
  context.lineCap = "round";
  context.strokeStyle = "#333";

  canvas.addEventListener("mousedown", function(e){
    draw = true;
    context.beginPath();
    context.moveTo(e.pageX - painting.offsetLeft, e.pageY - painting.offsetTop);
  });

  canvas.addEventListener("mousemove", function(e){
    if(draw){
      context.lineTo(e.pageX - painting.offsetLeft, e.pageY - painting.offsetTop);
      context.stroke();
    }
  });

  canvas.addEventListener("mouseup", function(e){
    draw = false;
  });
}

这个案例可以使用鼠标在画布上自由绘制，可以从中了解到Canvas画布的使用。

六、如何设置Canvas画布的背景

我们可以使用CSS样式来设置Canvas画布的背景，当然，你也可以在JavaScript中直接设置。


// 使用CSS样式设置Canvas背景
canvas {
  background: #FFFFFF;
}

使用CSS设置画布背景的方式与设置普通背景的方式无异，只需要给画布设置相应的背景颜色即可。

七、Canvas画布的使用

我们可以使用Canvas画布来实现很多效果，比如绘制图形、文本、图像等。下面是一个简单的例子：


// 画布获取
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");

// 设置画布背景颜色
context.fillStyle = "#FFFFFF";
context.fillRect(0, 0, canvas.width, canvas.height);

// 绘制三角形
context.beginPath();
context.moveTo(100, 50);
context.lineTo(150, 150);
context.lineTo(50, 150);
context.closePath();
context.fillStyle = "#CCCCCC";
context.fill();

Canvas画布的使用非常丰富多彩，只有你想不到，没有它绘制不出来的图形。

八、Canvas画布宽与画板宽

Canvas画布与实际显示在页面上的画板存在一定的区别，比如实际画板的宽度可以随意调整，而画布的大小却需要固定。通过CSS样式的尺寸设置，在页面中可以随意调整画板的大小。


// CSS样式设置画板宽与高
.painting {
  width: 600px;
  height: 400px;
}

通过CSS样式设置画板的宽和高，从而设置Canvas画布的大小，以便于在实际页面中进行动态调整。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/161052.html