9 月 2019 - 修身养性，知行合一

在JavaScript 之 canvas（一）中理解了canvas的绘图原理。在JavaScript 之 canvas（二）中掌握了基本图形的函数，但是这些图形绘好之后是不会改变的。这并不符合我要做的这个绘图工具的最基本功能。那么这篇文章来实现利用鼠标位置实时绘图。首先我们需要了解动态绘图的思路，canvas在同一时刻，只能显示一张图片，也就是说，canvas是静态的，要实现实时绘图，就要不停切换canvas显示的图片内容，从而达到我们要的效果。如图效果，让图片按照我们的鼠标移动而改变大小，这样就需要刷新c…

2019年9月16日 2条评论 6480点热度 5人点赞 jeremyjone 阅读全文

在JavaScript 之 canvas（一）中理解了canvas的绘图原理，这次就开始绘制基本图形。一般来说，canvas的图形分成实心(fill)和空心(stroke)，我们的绘图板基本使用的是空心图形，但是也要了解一下实心图形，其原理是一毛一样的。直线一般来说，直线需要知道两端坐标，所以代码如下： // 直线 context.moveTo(150, 150); // 移动到某一位置 context.lineTo(300, 150); // 画直线从当前点到给定的位置 context.stroke(); …

2019年9月12日 0条评论 6551点热度 1人点赞 jeremyjone 阅读全文

认识canvas <canvas>是一个HTML元素，可用于通过脚本（通常是JavaScript）绘制图形。更多介绍，可以参考MDN的文档。这个系列我希望写一个简单的画图功能，并不是很困难，但是基本功能都会有接触。先来看一下成品：可以看到，涵盖了普通形状，箭头形状，橡皮，以及文字，就是一个简单而又不失功能的画板。那么开始学习canvas吧。一个简单的canvas页面 <!DOCTYPE html> <html lang="en"> <head&…