关于javascript:JS30Wes-BosHTML5-画板-06

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.