乐趣区

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

jiezi

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.

退出移动版