html 毛笔书写效果,利用canvas实现毛笔字帖(三)

news/2024/11/17 22:44:03/

上接javascript

二、 根据功能需要完善代码

3. 第3部分controller.js

这一部分的功能就是要修改毛笔的颜色,还有清空画布。

功能简单,我们一起向下讲。

一开始依然是init

controller.js

var controller = {

canvas: null,//html中的canvas对象,主要标签

context: null, //canvas对象获取的context,用于绘图

init: function (canvas) {

this.canvas = canvas;//接收外界canvas,赋值给自己的属性``canvas``,在下面的其他方法中需要用到

this.context = canvas.getContext('2d');//通过canvas获取context,赋值给自己的属性``context``,在下面的其他方法中需要用到

//事件监听

this.bindEvent();

},

bindEvent: function () {

var self = this;

//事件委托监听

document.getElementById('controller').addEventListener('click', function (event) {

var target = event.target;

if(target.nodeName.toLowerCas


http://www.ppmy.cn/news/539645.html

相关文章

html 毛笔书写效果,canvas 手写毛笔字效果

canvas 手写毛笔字效果 #canvasId { background-color: #FFFFcc; } function Handwriting(id) { this.canvas document.getElementById(id); this.ctx this.canvas.getContext("2d"); this.ctx.fillStyle "rgba(0,0,0,0.25)"; var _this this; this.ca…

html怎么设置毛笔字体,三种实用的毛笔书法字体设计制作教程

三种实用的毛笔书法字体设计制作教程 书法字体2015.09.08书法字体 毛笔字、书法字都非常漂亮,但现在除了少数书法家,书法爱好者能写的一手漂亮的书法外,很少有人能写好书法字了!作为设计师(特别是网页设计师、包装设计师)&#xf…

html怎么设置毛笔字体,原来毛笔字体是这么设计的!

无论是制作专题页还是制作海报我们都会用到字体,在很多的广告中为了加强画面的冲击力,经常会使用到毛笔字的表现形式。当使用毛笔字表现的时候,很多设计师都会进去一个误区,马上去网站找字库,怎么也找不到合适的字体。…

Windows和Linux动态注入

摘要:最近对动态注入有一些兴趣因此搜索了些资料,简单整理了下相关的技术实现。本文只能够带你理解何如注入以及大概如何实现,对注入的方法描述的并不详细。   关键字:dll注入,hook,提权   读者须知&am…

7A50T 引脚功能详解

本文针对7A50T芯片,详细讲解硬件设计需要注意的技术点,可以作为设计和检查时候的参考文件。问了方便实用,按照Bank顺序排列,包含配置Bank、HR Bank、HP Bank、GTP Bank、供电引脚等。 参考文档包括: ds181_Artix_7_D…

温度传感器100k 热水器温度探头

东莞市龙畅电子科技有限公司,是专门从事温度传感器生产与研发的企业,公司生产的温度传感器品种多,规格全,主要有热敏 ntc温度传感器,ptc温度传感器,pt100,pt1000温度传感器,ds18b20温…

家装电线越粗越好吗

在装修这件事上,很多家庭都尽量用最好的,尽量做预留。电线的选择也是如此,有些人认为电线越粗越好,虽然现在4平方线和6平方线比较贵,但是负载更大更安全,以后也可以为各种电器预留。但实际上,这…

10. 第十部分:未来的JavaScript发展趋势

10.1 WebAssembly WebAssembly(通常缩写为Wasm)是一种二进制指令格式,旨在在Web浏览器和其他环境中以安全、高效的方式执行。它是一种低级虚拟机,作为可移植的编程语言目标,允许开发人员在Web上以接近本机性能运行其代…