首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    手写原生代码专题 | 简易手写画板(二)

    我们用到了画布 canvas 相关的知识,比如创建画布、画圆形直线的基础知识,有了这些基础后,我们就能轻松完成本示例,示例效果如下视频所示。...,接下来调用 canvas.getContext('2d') 使用2D的模式渲染画布,然后我们就可以在画布里进行直线画圆操作了。...1.3 绘制圆形 CanvasRenderingContext2D.arc() 是 Canvas 2D API 绘制圆弧路径的方法。...四、编写JS脚本 最后进入代码的核心部分,编写 JS 脚本,这里我们只是简单的实现直线,为啥会用画圆形的API,主要为了让线条更加有手绘的感觉,在画线停顿的地方,有停顿的点,以线条的粗细为半径的圆点。...对象变量:获取画布、增减线条粗细的按钮、颜色控件、显示线条粗细值、清除按钮 然后定义一些变量值:初始化线条粗细的长度、鼠标是否按下的状态、线条颜色的默认值、颜色变量、鼠标的位置x,y 变量 然后我们定义画圆形

    1.4K20

    p5.js 开发点彩画派的绘画工具

    然后我又继续想啊想,想到我们用 canvas 好像也能做出一款点彩画的绘图工具,但用原生的方式写是不可能的,因为我懒。思前想后,还是觉得用 p5.js 写会好点,毕竟这个库也是个比较知名的艺术库。...样式方面就靠各位工友动手啦~ jcode 在移动端阅读的工友可以看下图效果~ 动手编码 要实现这个版工具主要有以下步骤: 创建 canvas 画布。 创建颜色选择器。 创建画笔宽度控制器。...根据鼠标点击和点击时移动的位置创建圆形。 点击重置画布按钮将画布背景设置回白色。 主要工作就是以上几步,而且这几步都用了 p5.js 提供的方法去实现。...绘制过程的代码写在 draw 周期里,使用了 circle() 方法创建圆形圆形的坐标就是鼠标绘画时的当前坐标,圆形的尺寸是取滑块的值,圆形的颜色取了颜色选择器的值。...,用法上和 npm 下载的 p5.js 是有一丢丢区别的,想了解这方面知识可以看看 《p5.js 使用npm安装p5.js后如何使用?》

    33331

    熬夜总结了 “HTML5布” 的知识点(共10条)

    效果动画,加载Loading: H5游戏效果: 对于Canvas需要掌握: 使用Canvas直线,矩形,圆形以及设置它们的样式。 Canvas中的图形变换,渐变,文字和图片。...使用Canvas基本图形 Canvas的坐标体系 使用Canvas直线,矩形,圆形圆形设置样式 Canvas坐标体系 canvas默认大小,300*150 通过HTML,css,JavaScript...:ctx.moveTo(x1,y1),ctx.lineTo(x2,y2) 画圆形: ctx.arc(x,y,radius,0,Math.PI*2,true) 矩形:可以通过直线来,也可以直接用(ctx.strokeRect...绘制 Canvas的图形绘制和像素获取 Canvas阴影绘制 Canvas剪辑区域 Canvas曲线绘制 Canvas图形刷 ctx.createPattern可以创建一个刷模式,进而可以设置到fillStyle...中(sx, sy)处的宽sw,高sh的区域,绘制到(dx,dy)处,并缩放为宽dw, 高dh 对canvas插件的相关了解 什么是Canvas插件,掌握Chart.js插件,了解Chartist.js

    7.5K10
    领券