canvas

概述

Canvas API 提供了一个通过JavaScript 和 HTML的<canvas>元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面

 

一、基本用法

1. 定义一个canvas元素，规定宽高，即宽高都是150的画布。
   <canvas id="demo" width="150" height="150"></canvas>

 

1. 获得渲染上下文和他的绘画功能

canvas元素创造了一个固定大小的画布，它公开了一个或多个渲染上下文，其可以用来绘制和处理要展示的内容。我们将会将注意力放在2D渲染上下文中 。

    

var canvas = document.getElementById('demo'); 

var ctx = canvas.getContext('2d');

 

先通过 document.getElementById() 得到 canvas 对象，你可以通过使用它的getContext() 方法来访问绘画上下文

 

二、绘制形状

 

了解画布栅格及坐标

 

我们定义了一个宽高都为150的 canvas 画布，那么这个画布拥有x y轴，左上角为（0，0），为下图所示方向

 

          图1   

                     

          图2

 

绘制矩形

 

• 填充矩形
  ctx.fillRect(x, y, width, height);

在坐标（x,y）处绘制宽width和高height的填充矩形
 

• 清除矩形
  ctx.clearRect(x, y, width, height);
  清除坐标（x,y）矩形区域，让清除部分完全透明。

 

• 矩形边框
  ctx.strokeRect(x, y, width, height)

在坐标（x,y）处绘制宽width和高height的矩形边框

 

结合这三种方法绘制图2效果的canvas

 

function draw() {

  var canvas = document.getElementById('canvas');

  if (canvas.getContext) {

    var ctx = canvas.getContext('2d');

 

    ctx.fillRect(25, 25, 100, 100);

    ctx.clearRect(45, 45, 60, 60);

    ctx.strokeRect(50, 50, 50, 50);

  }

}

 

三、添加样式和颜色

• fillStyle=color
  设置图形的填充颜色。
   

• strokeStyle=color
  设置图形轮廓的颜色

 

四、绘制文本

• fillText(text, x, y [, maxWidth])  （较常用）
  在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的
   

• strokeText(text, x, y [, maxWidth])
  在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的

 

绘制文本时的样式：

 

• 字体 font = value 可包含字体大小和字体
  ctx.font = "24px PingFangSC-Regular";
   

• textAlign = value
  文本对齐选项. 可选的值包括：start, end, left, right or center. 默认值是 start。
   

• textBasellign = value
  基线对齐选项. 可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。
   

• direction = value
  文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。

 

五、使用图片

canvas更有意思的一项特性就是图像操作能力。可以用于动态的图像合成或者作为图形的背景，以及游戏界面（Sprites）等等。

甚至可以将同一个页面中其他canvas元素生成的图片作为图片源。

 

引入图像到canvas的基本步骤：

1. 获得一个指向HTMLImageElement的对象或者另一个canvas元素的引用作为源，也可以通过提供一个URL的方式来使用图片

2. 使用drawImage()函数将图片绘制到画布上