canvas个人笔记

文章

在HTML5的Canvas上绘制椭圆的几种方法

html5 Canvas画图11：椭圆形(贝塞尔曲线)
canvas快速绘制圆形、三角形、矩形、多边形 - luckykun - 博客园非常推荐
Canvas中的save方法和restore方法推荐
这篇文章用到了translate,rotate,再次说一下translate,rotate,scale改变的是坐标轴,对当前状态没影响

beginPath开启新的(独立)路径和closePath自动闭合(三角形闭合),没有对应的关系,不是一个东西
-> 浅谈HTML5中canvas中的beginPath()和closePath()
独立路径:

rect() 不是独立路径,样式会被覆盖
/*绘制矩形路径 不是独立路径*/
    /*ctx.rect(100,100,200,100);
    ctx.fillStyle = 'green';
    ctx.stroke();
    ctx.fill();*/
/*绘制矩形  有自己的独立路径 (相当于开启beginPath())*/
    //ctx.strokeRect(100,100,200,100);
    ctx.fillRect(100,100,200,100);

    /*清除矩形的内容*/
    ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
    

渐变

可以使用一个渐变的方案了填充矩形(类似于CSS3)
渐变是有长度的
/*x0y0 起始点 x1y1 结束点  确定长度和方向*/
var linearGradient = ctx.createLinearGradient(100,100,500,400);
    linearGradient.addColorStop(0,'pink');
    // linearGradient.addColorStop(0.3,'red');
    linearGradient.addColorStop(1,'blue');

    ctx.fillStyle = linearGradient;
    ctx.fillRect(100,100,400,100);

    /*pink---->blue*/
    /*回想线性渐变---->要素 方向  起始颜色 结束颜色 */
    /*通过两个点的坐标可以控制 渐变方向*/

理解曲线是怎么来的(数学公式)

/*1.体验曲线的绘制*/
/*2.线是由点构成的*/
/*3.曲线可以由数学公式得来*/
/*公式：y = x/2 */
/*公式：y = (x + 2) ^2  */
/*公式：y = sin(x) */
for(var i = 1 ; i < 600 ; i ++){
    var x = i;
    //var y = x/2;
    //var y = Math.pow(x/10-30,2);
    var y = 50*Math.sin(x/10) + 100;
    ctx.lineTo(x,y);
}
ctx.stroke();

arc圆

圆的右边是0/2PI弧度是固定的,就是说每个角度都是固定的..

弧度可以是负数

画空心/填充扇形(注意要确定圆心)

// 没有圆心会变成弓形
/*在中心位置画一个半径150px的圆弧右上角 扇形  边  填充 */
var w = ctx.canvas.width;
var h = ctx.canvas.height;
/*把起点放到圆心位置*/
ctx.moveTo(w/2,h/2);
ctx.arc(w/2,h/2,150,0,-Math.PI/2,true);
/*闭合路径*/
// ctx.closePath();
// ctx.stroke()
ctx.fill();

绘制文本

// 获取文本的宽度 ctx.measureText(str).width
/*

基于起点左边对齐
*/
var myCanvas = document.querySelector('canvas');
var ctx = myCanvas.getContext('2d');
/*1.在画布的中心绘制一段文字*/
/*2.申明一段文字*/
var str = '您吃-,了吗';
/*3.确定画布的中心*/
var w = ctx.canvas.width;
var h = ctx.canvas.height;
/*4.画一个十字架在画布的中心*/
ctx.beginPath();
ctx.moveTo(0, h / 2 - 0.5);
ctx.lineTo(w, h / 2 - 0.5);
ctx.moveTo(w / 2 - 0.5, 0);
ctx.lineTo(w / 2 - 0.5, h);
ctx.strokeStyle = '#eee';
ctx.stroke();
/*5.绘制文本*/
ctx.beginPath();
ctx.strokeStyle = '#000';
var x0 = w/2;
var y0 = h/2;
/*注意：起点位置在文字的左下角*/
/*有文本的属性  尺寸 字体  左右对齐方式  垂直对齐的方式*/
ctx.font = '40px Microsoft YaHei';
/*左右对齐方式 (center left right start end) 基准起始坐标*/
ctx.textAlign = 'center';
/*垂直对齐的方式 基线 baseline(top,bottom,middle) 基准起始坐标*/
ctx.textBaseline = 'middle';
// ctx.direction = 'rtl';
// ctx.strokeText(str,x0,y0);
ctx.fillText(str,x0,y0);
/*6.画一个下划线和文字一样长*/
ctx.beginPath();
/*获取文本的宽度*/
console.log(ctx.measureText(str));
var width = ctx.measureText(str).width;
ctx.moveTo(x0-width/2,y0 + 20);
ctx.lineTo(x0+width/2,y0 + 20);
ctx.stroke();

坐标的translate/scale/rotate

// 是坐标轴的移动
ctx.strokeRect(0,0,100,100)
ctx.translate(100,100);
ctx.strokeRect(0,0,100,100)
// 是坐标轴的缩放
ctx.scale(0.5,1)
ctx.strokeRect(100,100,200,200)
ctx.strokeRect(100,100,100,100)

// rotate 旋转中心是坐标原点
ctx.rotate(Math.PI/6);
ctx.strokeRect(50,50,100,100);
// 通过translate设置坐标的旋转中心
var startAngle = 0;
ctx.translate(150,150);
setInterval(function () {
startAngle += Math.PI/180;
ctx.rotate(startAngle);
ctx.strokeRect(-50,-50,100,100);
},500);

简单的获取随机颜色

var getRandomColor = function () {
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    return 'rgb(' + r + ',' + g + ',' + b + ')';
}

填充规则(非零环绕) 相加为0就不填充

应用:

//1.虚线旋转边框
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
// 偏移大小
var offset = 0;
// 绘制
var draw = function () {
  context.clearRect(0,0, canvas.width, canvas.height);
  context.setLineDash([8, 4]);
  context.lineDashOffset = offset;
  context.strokeRect(2, 2, 236, 116);
}

var run = function () {
  offset += 0.5;
  if (offset > 24) {
    offset = 0;
  }
  draw();
  // 继续绘制
  requestAnimationFrame(run);
}

run();

//发散 (感觉还挺好看的...本来是画坐标轴的)
    let canvas = document.getElementById('canvas')
    let ctx = canvas.getContext('2d')

    let gridSize = 10
    var canvasHeight = ctx.canvas.height;
    var canvasWidth = ctx.canvas.width;
    var xLineTotal = Math.floor(canvasHeight / gridSize);


    for (let i = 0; i <= xLineTotal; i++) {
      ctx.beginPath();
      ctx.moveTo(0, i * gridSize - 0.5)
      ctx.lineTo(canvasWidth, 10 - 0.5)
      ctx.stroke()
    }