title: 【原生javascript我的项目】Canvas 08
date: 2022-01-07 20:13:07
tags: 原生javascript我的项目
categories: 30个原生javascript我的项目

作者：©Iaine 万一
简介：30 Day Challenge是 Wes Bos 设计的一个 30 天原生js编程挑战。我的项目收费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。

本我的项目为第8天我的项目，为了更有挑战性，我实现了 挪动端绘图 、画笔款式抉择的性能。Have fun with the website! ♪(^∇^*)

网页成果：https://janice143.github.io/m... （画了个嗅嗅，一不小心裸露本人是个魔法师啦，哈哈）

我的项目形容

利用html5 中的canvas实现的画板。在电脑端可利用鼠标挪动点击进行绘图，在挪动端能够通过触摸挪动实现绘图。绘图的笔色彩、粗细能够调节，选中橡皮擦可对部分区域进行批改，清屏按钮能够一键清屏。

我的项目重点

  • canvas

    • window.innerWidth
    • lineJoin、lineWidth、lineCap
    • strokeColor
    • beginPath、moveTo、lineTo、stroke()

  • 鼠标事件

    • mousemove: e.offsetX, e.offsetY
    • mouseup
    • mouseout
    • mousedown

  • 触摸事件

    • touchmove
    • touchend
    • touchcancel
    • touchstart
    • touch坐标计算的坐标偏移问题

  • input标签的change事件

    • this.value
    • this.name
    • this.checked
    • 滑块input线性过渡变成非线性过渡

  • css的flex容器属性

    • display:flex
    • align-items: center 竖直居中
    • justify-content: center 程度居中

我的项目过程

html局部

  1. 三个input控件

    • 色彩 type="color"
    • 粗细 type="range"
    • 橡皮擦 type="checkbox"
  2. canvas标签设置画布
  3. 清屏按钮 type="button"

Js局部

  • 获取canvas标签，并设定宽度和高度；获取四个input元素

  • 利用getContext()获取渲染上下文，存储在变量ctx中。

    • 在二维渲染上下文中，左上点坐标为(0,0)，向右（x轴）向下（y轴）为正

  • 设置初始值

    • 初始化画笔色彩（ctx.StrokeStyle）粗细（ctx.lineWidth），橡皮擦不选中(eraserChecked = false)；
    • 设置lineCap(线的末端形态）为圆形，lineJoin（两条线段连接处形态）为圆形

  • 编写updateValue()函数

    • 三个控件input产生扭转时，触发事件，调用该函数，更新画笔三个初始值。

  • 编写draw()函数

    • 设定一个用于标记绘画状态的变量，画或者不画（true or false)
    • 判断是鼠标事件还是触摸事件，返回以后鼠标点和触摸点的坐标
    • 赋值新的画笔参数
    • 绘制前调用beginPath()，设定门路终点、起点

  • 编写clearCanvas()函数

    • 清屏的原理就是在画布上画满一个红色矩阵
  • 所有input的监听事件，控件中的change事件，清屏是click事件

CSS局部

应用over-flow:hidden来设置页面不动，这点在挪动端触摸时显得必不可少。

我的项目知识点

Canvas

  • 创立 Canvas 元素
<canvas id="myCanvas" width="200" height="100"></canvas>
  • 通过 JavaScript 来绘制
var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');

  • 根本款式属性

    • 色彩：strokeStyle：线条描边的色彩，fillStyle：填充的色彩
    • 线型：lineCap：笔触的形态；lineJoin：线条相较的形式；lineWidth：线条的宽度

  • 门路绘制

    • beginPath()：新建一条门路
    • stroke()：绘制轮廓
    • moveTo()：绘制操作的终点
    • lineTo()：门路的起点

触摸屏端坐标偏移问题

应用鼠标事件在canvas画布上画画，非常容易就能获取到画布上的坐标，应用（e.offsetX，e.offsetY）就行。然而对于挪动端的触摸屏，必须利用【页面上的坐标】-【画布左上角的坐标】=【画布上的坐标】公式去计算以后触摸地位坐标。

changedTouches[0].clientX示意以后触摸点在页面上的坐标，e.target.offsetLeft示意画布偏离页面左上角的地位。

x = e.changedTouches[0].clientX -e.target.offsetLeft;y = e.changedTouches[0].clientY-e.target.offsetTop;

JS30的第8个我的项目圆满完成啦，尽管对原我的项目做了一些改良，然而整体上也实现了一些我本人的独特性能。PS：发现自己真的很喜爱编程，fun with front end development.心愿本人能力越来越强，实现本人的程序员幻想。

感激浏览，有问题分割我的邮箱1803105538@qq.com.