html canvas画背景图片,使用canvas画图并充当背景图片,但出现奇怪效果_html/css_WEB-ITnose...

2023-10-30

5268f80b9b1e01f982625ef6fac83ca1.png

这是初始的样子,我想要的效果是这颗心不随滚动条滚动

当我拖动滚动条的时候,这颗心跟着移动了,但原位置固定了另一颗心。

继续拖动滚动条,

由此可见,初始页面的心会随着滚动条移动,但同时有另一个心被固定在中间。

我只想要让这个心被固定在中心。不会因为滚动条的移动而出现另一颗心。

我通过JS建立canvas并将画设为背景图,JS代码如下:

var canvas = document.createElement('canvas');

var canvas_width = $("body").css("width").split("p")[0];

var canvas_height = $("body").css("height").split("p")[0];

document.body.appendChild(canvas);

canvas.id='homePageCanvas';

canvas.width = canvas_width;

canvas.height = canvas_height;

//canvas.style.backgroundColor = '#F9D1D4';

drawHeartCurve(); //画出了一个心

document.body.style.background = "url('"+homePageCanvas.toDataURL()+"')";

document.body.style['background-attachment']='fixed';

HTML/CSS只有一个很高的div让滚动条出现。

回复讨论(解决方案)

document.body.appendChild(canvas);这行删除

document.body.appendChild(canvas);这行删除

不行,这样子画出来的东西就没了。

建议加个alart调试看看, 会不会是代码重复执行了。

建议加个alart调试看看, 会不会是代码重复执行了。

我在画心的函数里加了alert(1),只弹出一次1....

你引用元素时不要用id “homePageCanvas”,直接用 var canvas = document.createElement('canvas');这行定义的 canvas变量就可以了

页面名称

已解决。

要增添下列语句:

canvas.style.display="none";

1428d0e076c3959ab11d28a39bc84fab.png

5268f80b9b1e01f982625ef6fac83ca1.png

本条技术文章来源于互联网,如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源:php中文网

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

html canvas画背景图片,使用canvas画图并充当背景图片,但出现奇怪效果_html/css_WEB-ITnose... 的相关文章

  • 自学经典5个月的python学习历程,很多老司机都不知道的奥秘

    人生苦短 我用Python 下面分享pyhton的一些基础知识 学习中可以帮助快速入门 三元条件判断的3种实现方法 C语言中有三元条件表达式 如 a gt b a b Python中没有三目运算符 但Python有它自己的方式来实现类似的功
  • xilinx开发过程中的ip核配置总结

    1 XILINX的FIFO 不同带宽输入输出 输出时 默认是先输出高位 再输出低位 这个能不能设置 先输出低位再到高位 答 在写入的时候 切换下位置就行了 2 zynq7020 fpga启动了 但是ps没反应 ps灯不闪烁 程序直接ram运
  • Anaconda > Windows+Anaconda迁移到另一个硬盘

    Anaconda轻松迁移到另一个硬盘 so easy 环境 目标 移动Anaconda目录 环境调整 结果 环境 Win10 Windows10 正常运行的Anaconda 安装目录和环境变量都是 C Anaconda3 30 GB 目标
  • 折腾响应式布局设计

    看到这个标题是不是很头大呢 不错 我这一周就折腾了这个既是要求瀑布流 又是响应式布局的货 而且还是在bootstrap框架上折腾的 所以对于响应式布局呢 咱们可以忽略了吗 当然是不行的 响应式布局概念 Responsive design 意
  • [HDU 4738] Caocao‘s Bridges

    Problem Description Caocao was defeated by Zhuge Liang and Zhou Yu in the battle of Chibi But he wouldn t give up Caocao
  • Java Scrpit 语言基础

    数据类型 Java script 的数据类型分为基础数据类型和复合数据类型 Java script的基本数据类型 1 数值型 数值型是Java script 中的最基本的数据类型 和其他语言不同的地方在于它不区分整数数值和浮点数值 在所有的
  • 关于金额验证的Java方法(采用正则表达式)

    这是自己写的一个关于数字验证的方法 public static boolean isNumber String str java util regex Pattern pattern java util regex Pattern comp
  • 标定协议之CCP协议实现流程介绍

    之前两篇文章对CCP标定协议作了初步的介绍 大家也应该有了一定的了解 本文将对CCP标定协议的实现进行介绍 让大家能够进一步理解CCP标定协议 目前CCP协议最新版本是V2 1 在Vector的官网上提供了相应的参考例子 本文基于Vecto
  • UniApp 实战指南

    uni app 是一个使用 Vue js 开发所有前端应用的框架 开发者编写一套代码 可发布到iOS Android Web 响应式 以及各种小程序 微信 支付宝 百度 头条 飞书 QQ 快手 钉钉 淘宝 快应用等多个平台 打包原生 APP
  • pycharm configuration配置参考文档

    一 虚拟环境的配置 1 进入Pycharm的设置页面 找到自己的项目 点击右上侧的 Add 按钮 进行添加 2 进入添加页面 选择已存在的虚拟环境 点击右侧按钮进行添加 3 选择你所需要的虚拟环境 进行添加 最后点击 OK 4 添加成功之后
  • 我对计算机网络技术的了解,对计算机网络技术专业人才培养教学资源建设的实践意义的理解...

    摘要 本文结合 计算机网络技术专业人才培养教学资源建设研究 以武汉职业技术学院网络技术专业为例 课题 编号2016GHB02056 针对计算机网络技术专业传统教学中存在的问题 寻求通过计算机网络技术人才培养教学资源的建设来改变目前的狀况 并
  • 游戏开发unity杂项知识系列:如何查看Unity API文档

    https blog csdn net scalince article details 75199853
  • 字典dict常用操作

    gt gt gt dict x 1 y 2 x 1 y 2 gt gt gt dict1 dict x 1 y 2 gt gt gt dict1 x 1 y 2 gt gt gt dict
  • 家居商城小程序:打造舒适家居生活的优选平台

    随着人们对家居生活品质的追求 家居商城小程序成为提供便捷购物和个性化服务的不可或缺的工具 通过家居商城小程序 用户可以浏览并购买各类家居商品 如家具 装饰品 家纺等 同时 家居商城小程序能提供热销商品推荐 客户评价和在线客服等功能 家居商城
  • 矩阵基本运算(C++)

    闲着没事 将以前利用C 实现的矩阵各种运算整理了一下 分享一下 矩阵运算包括 1 二维矩阵创建 6 两矩阵上下叠加 2 两矩阵相加 7 矩阵左右叠加 3 两矩阵相减 8 矩阵转置 4 两矩阵相乘 9 矩阵求逆 5 一个数字与矩阵相乘 10
  • Vue 项目下载文件最佳解决方案

    大厂技术 高级前端 Node进阶 点击上方 程序员成长指北 关注公众号 回复1 加入高级Node交流群 原文链接 https juejin cn post 7062888582465191944作者 远航 开发中经常遇到这样的功能 用户将文
  • 文字检测定位--SAST

    文字检测过程分两步 第一步为检测出文字所在的位置 第二步根据检测框里的内容进行文字识别 SAST是一种自然场景下的文本检测算法 论文地址 https arxiv org abs 1908 05498 一 背景知识 1 语义分割算法 FCN全
  • 如何使用vue的渲染函数 API:h函数创建一个el-select弹出框

    如何使用vue的h函数创建一个el select弹出框 效果示例图 示例代码 h 创建虚拟 DOM 节点 vnode 效果示例图 示例代码 const h this createElement this msgbox title 是否发送短
  • SAE J1939转ModBus RTU模块 YMMCS-7001使用说明及心得体会

    SAE J1939总线是工程机械行业常用总线 发动机 车辆等运行参数都可以通过该总线获取 常规电控系统以PLC加组态屏方案为主 具有RS485接口 ModBus RTU协议进行总线组网 YMMCS 7001 协议转换模块直接可将SEA J1

随机推荐

  • 【Linux】写时复制(CopyOnWrite)

    目录 什么是写时拷贝 写时拷贝原理 原文 https blog csdn net Code beeps article details 92838520 http c biancheng net view 1272 html 什么是写时拷贝
  • bootstrap-table 添加行保留原数据

    添加行 保留原数据 function addSgbzColumn var count bootstrap table bootstrapTable getData length var params new Array for var da
  • 使用GraphEdit调试你的Filter

    Posted by 令狐葱 on 2006年03月12日 今天看到在VC6 0里面可以直接使用 GraphEdit调试你自己编写的 Filter 但是反复试了多次就是摸不着门路 后来在网上找资料 又参考了一些书 问了郭郭和小侯 才终于把Gr
  • 线程类的构造方法与成员方法

    1 构造方法 public Thread 分配一个新的线程对象 public Thread String name 分配一个指定名字的新的线程对象 public Thread Runnable target 分配一个带有指定目标新的线程对象
  • mybatis详解(必会)

    文章目录 什么是mybatis 什么是持久化 什么是持久层 为什么要学习mybatis 配置解析 生命周期和作用域 ResultMap映射 一对多和多对一的处理 动态sql 缓存 EhCache 什么是mybatis MyBatis 是一款
  • 面试官问“你还有什么需要了解的吗”——应该这样回答

    最近被追问 如何化解面试官说出 你还有什么需要从我这里了解的吗 时你竟无言以对的尴尬 比较不建议在这个时候向面试官提问琐碎日常 比如 有没有加班费啊喂 上下班时间是怎样啊 打车吃饭是不是可以报销嘞 即使你在来面试前并没有对这家公司做过少许调
  • 机器学习(十四)SVM分类案例

    01 案例一 鸢尾花数据SVM分类 import numpy as np import pandas as pd from sklearn import svm from sklearn model selection import tra
  • Golang sync.pool对象池

    概览 Goalng中通过sync pool提供了对象池的实现来达到对象复用的目的 在netty中 也通过Recycle类实现了类似的对象池实现 在netty的对象池Recycle中 当A线程需要将B线程申请的对象回收到对象池中的时候 会专门
  • handleMessage的使用

    xml代码
  • YOLOv5学习笔记

    转载于 深入浅出Yolo系列之Yolov5核心基础知识完整讲解 江南研习社 CSDN博客 yolov5 1 网络结构 Yolov5官方代码中 给出的目标检测网络中一共有4个版本 分别是Yolov5s Yolov5m Yolov5l Yolo
  • 贪心算法:最优分解问题

    问题描述 设n是一个正整数 现要求将n分解为若干个互不相同的自然数的和 使这些自然数的乘积最大 代码如下 int BestMul int n int i j mul 1 int num 初始化一个数组 用来存放分解后的每个数 int a M
  • 基于Feign的局部请求拦截

    由于项目的要求 不能对所有基于Feign的进行拦截 需要对不同的Feign请求进行不同的拦截 经过资料的收集整理以及SpringCloud中对于Feign的集成的源码的阅读 解决了针对Feign请求的局部拦截 本项目中SpringCloud
  • Git(10)——Git多人协同开发之邀请成员

    一 简介 本篇文章接着第九章介绍Git多人协同开发如何邀请成员 二 创建dev分支 前面已经提到master只用于上线正式代码 因此需要创建一个专门用于开发的dev分支 使用如下命令创建dev分支并切换到dev分支 git checkout
  • 闲鱼项目月入三万,赶紧来蹭这波红利!

    如果你弄懂了信息差 你就会知道什么叫商业 也许你会说 别扯了 现在互联网这么发达 信息差肯定越来越少 我只能说你太天真 信息差存在于你生活的每个角落 尤其是在人们的地域文化差异 教育水平层次和认知中 而这其间也存在着巨大的商机 举个栗子 比
  • mac安装conda后,终端的用户名前面有一个(base),最佳解决方案

    本文转载自https blog csdn net u010666669 article details 90085125 mac安装了conda后 前面会有一个 base 很烦人 终于找到最佳解决方案了 conda config set a
  • 刷脸支付永远不会过时只会不断的变革

    物联网大爆炸时代 AI 人工智能 人脸识别等名词像一个永不过时的网红时常出现在我们面前 从研发到发展 然后落地应用 刷脸支付逐步走进我们的衣食住行中 并在很多行业发挥着其高效便捷的作用 刷脸支付是对传统支付方式的革命 也是移动支付新的利润增
  • Linux下的网络服务之网关、DNS、网桥

    一 网关 1 1 基本概念 网关 路由器上和客户主机处在同一网段的IP称为客户机的网关 1 2 网关的设定 方式 命令 含义 临时 ip route add default via 172 25 254 100 添加网关 ip route
  • 找不到com.google.common.base.Predicates

    原因在于 swagger2解决冲突时 排除了了guava 在dependecies management进行版本限制
  • Windows丢失缺少api-ms-win-crt-process-l1-1-0.dll解决方法

    其实很多用户玩单机游戏或者安装软件的时候就出现过这种问题 如果是新手第一时间会认为是软件或游戏出错了 其实并不是这样 其主要原因就是你电脑系统的该dll文件丢失了或者损坏了 这时你只需下载这个api ms win crt process l
  • html canvas画背景图片,使用canvas画图并充当背景图片,但出现奇怪效果_html/css_WEB-ITnose...

    这是初始的样子 我想要的效果是这颗心不随滚动条滚动 当我拖动滚动条的时候 这颗心跟着移动了 但原位置固定了另一颗心 继续拖动滚动条 由此可见 初始页面的心会随着滚动条移动 但同时有另一个心被固定在中间 我只想要让这个心被固定在中心 不会因为