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

6次阅读

共计 2155 个字符，预计需要花费 6 分钟才能阅读完成。

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 程度居中

三个 input 控件
- 色彩 type=”color”
- 粗细 type=”range”
- 橡皮擦 type=”checkbox”
canvas 标签设置画布
清屏按钮 type=”button”

获取 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 事件

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

创立 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.

正文完