【Canvas】JavaScript用Canvas制作美丽的对称图案
生活中有看到一个对称图案，看着很美，于是想到，试试用Canvas试着画对称图形来，想到就做，自己还真捣鼓出来了，自己弄了好多的对称图这里就不晒出来了，接下来讲讲怎么做，有兴趣的同学可以自己边学边动手做，瞧瞧谁做得对称图形最好看呢。
1. 页面设计
要做出一个好作品，是需要熟悉对“Canvas”的操作经验的，理清好思路和制作步骤，然后设计出页面，一个页面文件代码如下
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>对称图 Symmetric graph</title></head><body><canvas id="canv1" style="border: 1px solid #ccc;"></canvas><img id="output_img"/><script type="module">import SymmetricGraph from './symmetric_graph.js';//引入模块window.onload=()=>{//...加载脚本}</script></body>
</html>
2. 编写脚本
接着，写好加载脚本，代码如下，别看代码少，建议学一学，原本很多行代码就变成这样一行代码了
const doms = {};
['canv1','output_img'].map(id=>[id,document.getElementById(id)]).forEach(args=>doms[args[0]]=args[1]);
const { canv1,output_img } = doms;//创建模块对象
let sg = new SymmetricGraph(canv1,output_img);
//设置对象的配置
sg.setConfig({lineWidth:5,//线条宽strokeStyle:'#f00',//线条颜色count:7,//复制图形的数量
});
3. 编写模块
上面发现了吗，加载的脚本中，有个对象类SymmetricGraph是哪里来的，发现缺少引用的模块文件symmetric_graph.js，接下来，我们就新建这一个模块
1. 初始化
模块文件的代码如下，先写好初始化逻辑，还有鼠标键的监听处理
export default class SymmetricGraph{#size;#ctx;#ctxV;#count=4;constructor(canv1,output_img){const ctx = canv1.getContext('2d');const { width, height } = ctx.canvas;const size = Math.max(width,height);const canvasV = document.createElement('canvas');canvasV.width=size;canvasV.height=size;const ctxV = canvasV.getContext('2d');ctx.canvas.width=size;ctx.canvas.height=size;//保存需要读取的设置this.#size=size;this.#ctx=ctx;this.#ctxV=ctxV;//默认设置this.setConfig();let pointes = [];//鼠标键按下时的处理canv1.addEventListener('mousedown',(e)=>{const { x, y } = e;pointes.push({x,y});ctx.beginPath();ctx.moveTo(x,y);});//鼠标键按下并移动时的处理canv1.addEventListener('mousemove',(e)=>{if(pointes.length<=0) return;const { x, y } = e;ctx.lineTo(x,y);ctx.stroke();this.drawImage(ctx.canvas.toDataURL(),this.#count);});//鼠标键松开时的处理canv1.addEventListener('mouseup',(e)=>{const { x, y } = e;pointes.length=0;});}//设置配置setConfig(e={}){const config={lineWidth:2,strokeStyle:'#250',backgroundColor:'#fff',count:4,};Object.assign(config,e);const ctx = this.#ctx;ctx.lineWidth=config.lineWidth;ctx.strokeStyle=config.strokeStyle;this.#ctxV.fillStyle=config.backgroundColor;this.#count=config.count;}//主要方法，绘制多个复制的图形drawImage(src,count=4){//...这里省略，下一步接着讲}}
2. 主要方法
将到重点，这是绘制图像的方法drawImage()，传入两个参数，分别时要复制的图像src，和复制数量count，仔细看下代码，会发现很简单
let img = new Image();
img.onload=()=>{const size = this.#size;const s = size*0.5;const ctx = this.#ctxV;const max = 360;let offset = max/count;//填充画布背景ctx.rect(0,0,size,size);ctx.fill();//旋转不同角度，再绘制图形for(let i=0; i<max; i+=offset){ctx.save();ctx.translate(size/2,size/2);ctx.rotate(i/180*Math.PI);ctx.translate(-size/2,-size/2);ctx.drawImage(img,(size-s)/2,0,s,s);ctx.restore();}//将绘制好的图案设置到图像标签中，显示出来output_img.setAttribute('src',ctx.canvas.toDataURL());//清空画布ctx.clearRect(0,0,size,size);
};
img.src=src;
4. 运行测试
很快收工了，写得代码不多，没有问题的话，就用浏览器打开网页，试着在画布上用鼠标按下，随意画，就会看到生成漂亮的图案了，鼠标右键可保存下来，这个用途有很多的，能想到的是，可以用在刻印上，或者当作纹理图案素材，最后，附上录制的效果图
【Canvas】JavaScript用Canvas制作美丽的对称图案相关推荐
- 使用html制作圆弧正方形,JavaScript+html5 canvas制作的圆中圆效果实例
本文实例讲述了JavaScript+html5 canvas制作的圆中圆效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: demo #canvas { background: ...
- 【JavaScript】Canvas绘制美丽的网螺旋旋转图形
<!DOCTYPE html> <html> <head><meta http-equiv = "content-type" conten ...
- html加javascript和canvas类似超级玛丽游戏
html加javascript和canvas制作 复制可用 <!doctype html> <html lang="en"> <head> &l ...
- HTML5 javascript修改canvas的大小
方法1: 设定固定的值,这种方式跟在html中设定canvas的值没有什么区别: window.onload = function(){canvas.height = 100;canvas.width ...
- html5时间画布走动,javascript+HTML5 canvas绘制时钟功能示例
本文实例讲述了javascript+HTML5 canvas绘制时钟功能.分享给大家供大家参考,具体如下: 效果如下: 代码: www.jb51.net canvas绘制时钟 div{text-ali ...
- html js坐标图,javascript – HTML5 Canvas沿着带坐标的路径拖动图像
演示: http://jsfiddle.net/m1erickson/7vmML/ 示例代码: body{ background-color: ivory; } #canvas{border:1px ...
- 每天一个JavaScript实例-canvas绘图
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 【JavaScript】Canvas绘图整理
文章目录 绘制矩形 点线模式 绘制艺术字 绘制圆形路径 绘制圆角矩形 绘制凹多边形 绘制曲线 绘制位图 绘制坐标变换 绘制坐标变换与路径结合 绘制矩阵变换 绘制叠加效果 绘制线性渐变和径向渐变 位图填 ...
- 使用HTML5 / Canvas / JavaScript拍摄浏览器内屏幕截图
利用Google的"报告错误"或"反馈工具",您可以选择浏览器窗口的区域来创建屏幕截图,并在屏幕上提交有关错误的反馈. Jason Small的屏幕截图,张贴在 ...
最新文章
- LeetCode简单题之长度为三且各字符不同的子字符串
- vim block vim_如何不再害怕Vim
- Linux 中echo格式控制、重定向 、管道 | 简介
- npm的一些常用命令(在国内，建议使用cnpm，在淘宝镜像里面下载就行)
- 英雄联盟（LOL）实战技巧（作者：白银段位）
- -jar参数运行应用时classpath的设置方法
- SpringCloud环境搭建
- 小米12后壳谍照曝光：后置三摄相机模组 采用大眼瞪小眼设计
- ubuntu 14.04系统DHCP服务器搭建
- 谷歌修复十多个安卓高危漏洞
- Laravel+DingoAPI+Passport使用邮箱或手机号或uid登录
- CATIA_CAA_RADER26+VS2012安装教程
- Ognl表达式(根据Apache-Ognl文档直译)
- CVE-2019-0708 微软补丁更新
- Ubuntu 18.04 安装 RoboWare
- wpf后台设置颜色（背景色，前景色）
- kubernetes 401 You have been logged out because your token has expired
- 电脑开机出现the computer case is open怎么办？
- python语言单词_python单词_python 单词_python单词书 - 云+社区 - 腾讯云
- [概念]医学图像分割中常用的Loss function(损失函数) + 从loss处理图像分割中类别极度不均衡
热门文章