数据可视化学习（1） ---canvas

2019-02-27

悠哉游哉，开始学习啦，本文是学习canvas过程中的一些记录

参考资料

API简介

设置canvas的宽高要在元素或在其API，canvas.width || canvas.height，在CSS上设置为得到意想不到的结果，不信试试看哈···

<canvas id='canvas' width='500' height='500'></canvas>
//demo.js
var canvas = document.getElementById('canvas');
var ctx = canvas.getcontext('2d');

//路径或图形
ctx.fillRect();//填充矩形
ctx.strokeRect();//勾勒矩形轮廓
ctx.arc(x,y,r,anglestart,angleend,clockwise);//画弧形

ctx.beginPath();//开始路径
ctx.moveTo();//定义路径起始点
ctx.lineTo();//路径的去向
ctx.closePath();//画完后，关闭路径
ctx.fill() || ctx.stroke();//最后画出由路径构成的图形
// 本质上，所有的多边形都可以由路径画出；

ctx.save();//保存save以上ctx对象设置的属性值
ctx.restore();//恢复到先前保存在ctx对象上的所有属性值

window.requestAnimationFrame(callback) // 实现动画的重要API

基本图形

长方形

fillRect(x, y, width, height) : 绘制一个填充的矩形
strokeRect(x, y, width, height) : 绘制一个矩形的边框
clearRect(x, y, width, height) : 清除指定矩形区域，让清除部分完全透明

x和y是矩形左上角的坐标点，width是矩形宽度，height是矩形高度。

参考资料大漠-canvas绘制矩形

// 绘制矩形
  let ctx = document.getElementById('canvas').getContext('2d')
  function draw() {
    ctx.rect(10, 20, 50, 50)
    ctx.fill()
  }
  draw()

以下代码可以实现鼠标拖动绘制矩形，修改绘制函数，可以实现绘制不同的图形

let myCanvas = document.getElementById('canvas')
let ctx = myCanvas.getContext('2d')

myCanvas.width = window.innerWidth
myCanvas.height = window.innerHeight

var rect = {}
var drag = false

myCanvas.addEventListener('mousedown', mouseDown, false)
myCanvas.addEventListener('mouseup', mouseUp, false)
myCanvas.addEventListener('mousemove', mouseMove, false)
function mouseDown(e) {
  rect.startX = e.pageX - this.offsetLeft
  rect.startY = e.pageY - this.offsetTop
  drag = true
}

function mouseMove(e) {
  if (drag) {
    rect.w = (e.pageX - this.offsetLeft) - rect.startX
    rect.h = (e.pageY - this.offsetTop) - rect.startY
    ctx.clearRect(0, 0, myCanvas.width, myCanvas.height) // 清除画布
    drawRect("fill") // 绘图
  }
}

function mouseUp() {
  drag = false
}

function drawRect(style) {
  if (style === "fill") { // 填充
    ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h)
  }
  if (style === "stroke") { // 边框
    ctx.strokeRect(rect.startX, rect.startY, rect.w, rect.h)
  }
}

function drawScreen() {
  ctx.lineWidth = 10
  ctx.fillStyle = "#f36"
  ctx.strokeStyle = '#f36'
  ctx.font = "24px Arial"
  ctx.fillText("拖动鼠标就可以绘制矩形", 50, 50)
}
drawScreen()

圆形、圆弧

ctx.arc(x, y, radius, starAngle,endAngle, anticlockwise)
x : 圆心的 x 坐标
y：圆心的 y 坐标
radius ：半径
starAngle ：开始角度
endAngle：结束角度
anticlockwise ：是否逆时针（true）为逆时针，(false)为顺时针
ctx.arcTo(x1,yx,x2,y2,r)
在画布上创建介于两个切线之间的弧：

绘制路径

直线 lineTo(x,y)
绘制一条从当前位置到指定x以及y位置的直线
moveTo(x,y)
将笔触移动到指定的坐标x以及y上

canvas初始化或者beginPath()调用后，使用moveTo()函数设置起点
绘制笑脸

ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // 绘制
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false);   // 口(顺时针)
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true);  // 左眼
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true);  // 右眼
ctx.stroke();

样式

颜色、样式、阴影

属性	描述
fillStyle	设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle	设置或返回用于笔触的颜色、渐变或模式。
shadowColor	设置或返回用于阴影的颜色。
shadowBlur	设置或返回用于阴影的模糊级别。
shadowOffsetX	设置或返回阴影与形状的水平距离。
shadowOffsetY	设置或返回阴影与形状的垂直距离。

渐变

createLinearGradient(x1, y1, x2, y2)
createLinearGradient 方法接受 4 个参数，表示渐变的起点 (x1,y1) 与终点 (x2,y2)。
createRadialGradient(x1, y1, r1, x2, y2, r2)
createRadialGradient 方法接受 6 个参数，前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2

示例代码：

// 线性渐变

 let gradient = ctx.createLinearGradient(0, 0, 300, 0)
 gradient.addColorStop(0, "#f06");
 gradient.addColorStop(1, "#6cf")
 ctx.fillStyle = gradient       //设置fillStyle为当前的渐变对象
 ctx.fillRect(0, 0, 200, 200)

 // 径向渐变
 let gradient1 = ctx.createRadialGradient(100, 100, 10, 100, 100, 100)
 gradient1.addColorStop(0, '#EE82EE')
 gradient1.addColorStop(1, '#FF00FF')
 ctx.fillStyle = gradient1
 ctx.arc(100, 100, 100, 0, Math.PI * 2)
 ctx.fill()

径向渐变原理图

缩放、旋转、平移

缩放 scale(x,y)
x ：x坐标轴按 x 比例缩放
y ：x坐标轴按 y 比例缩放
旋转 rotate(angle)
angle ：坐标轴旋转x角度（角度变化模型和画圆的模型一样）
平移 translate(x,y)
x ：坐标原点向x轴方向平移x
y ：坐标原点向y轴方向平移y

平移，缩放，旋转先后顺序不同，坐标轴的变化图，图片来源于网络