初始Canvas

Canvas

初始化对象

let canvasDOM = document.querySelector("#canvasId");
let cas = canvasDOM.getContext("2d");

• moveTo(x,y) 定义线条开始坐标 cas.moveTo(100, 100);
• lineTo(x,y) 定义线条结束坐标 cas.lineTo(200, 100);

这里我设置颜色和宽度

颜色 cas.fillStyle = "#dc6b82";

宽度 cas.lineWidth = "10";

绘制一个等腰三角

      cas.beginPath();
      cas.moveTo(100, 100);
      cas.lineTo(200, 100);
      cas.lineTo(150, 10);
      cas.strokeStyle = "red";
      cas.lineWidth = "10";
      cas.closePath();
      cas.fillStyle = "#dc6b82";
      cas.fill();
      cas.stroke();

创建一个画布

cas.beginPath();
cas.stroke();
// 默认画笔颜色
var color = "#fac03d";
// 默认画笔粗细
var lineW = 5;
canvasDOM.onmousedown = function (e) {
    var even = window.event || e;
    // 获取鼠标位置
    var x = even.offsetX;
    var y = even.offsetY;
    cas.beginPath();
    cas.strokeStyle = color;
    cas.lineWidth = lineW;
    cas.moveTo(x, y);
    // 鼠标移动事件
    canvasDOM.onmousemove = function (e) {
    // 画线逻辑
    var even = window.event || e;
    // 获取鼠标位置
    var x = even.offsetX;
    var y = even.offsetY;
    cas.lineTo(x, y);
    cas.stroke();
};
//添加鼠标松开事件
canvasDOM.onmouseup = function () {
    canvasDOM.onmousemove = null;
    };
};