为什么document.getElementById(divName).innerHTML没有拿到画布元素？

document.getElementById(divName).innerHTML没有拿到画布元素的原因可能是因为divName对应的元素并不是一个画布元素，而是一个普通的div元素。在HTML中，画布元素是通过<canvas>标签来定义的，而不是通过<div>标签来定义的。

<div>标签是用来定义HTML文档中的一个区域，用于容纳其他HTML元素。而<canvas>标签则是用于绘制图形、动画、游戏等的元素。

如果想要获取画布元素，可以使用document.getElementById()方法来获取<canvas>标签对应的元素，而不是<div>标签对应的元素。例如：

var canvas = document.getElementById(divName);

然后，可以使用canvas.getContext()方法来获取绘图上下文，从而进行绘图操作。具体的绘图操作可以使用HTML5提供的Canvas API来实现。

关于画布元素的更多信息和使用方法，可以参考腾讯云的Canvas产品介绍页面：https://cloud.tencent.com/product/canvas

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

(Demo分享)利用JavaScript（JS）实现一个九宫格拖拽功能

2.利用视觉欺骗，点击鼠标悬浮的其实是利用JS生成的一个Div，交换信息的两个Div并没有位置交换，只是把双方属性进行了交换。 3.利用了勾股定理去判断距离。 ##效果图如下： ?...2.利用每个div方块都有相对的坐标值，当鼠标按下移动元素的时候，靠近哪个坐标值，靠近坐标值对应的方块就与当前元素进行位置交换。...// 因为divname设置了绝对定位，所以divname.offsetLeft的参数代表鼠标在div上距离父元素的位置 // (env.clientX - list.offsetLeft...divname上点下鼠标发生并且鼠标在指定的元素中移动 divname.onmousemove = function (env) { var env...// 并让移动后的双方层级为1，防止元素层级遮挡 divname.onmouseup = function () { if

1.5K1 0

HTML5新特性

id ("drag1") */ event.target.appendChild(document.getElementById(data)); /* 把被拖元素追加到放置元素...拖放.gif [3] canvas简单应用 canvas 元素本身是没有绘图能力, 所有的绘制工作必须在 JavaScript 内部完成 <canvas id="myCanvas" width...); /* 渐变结束颜色 */ cxt.fillStyle = grd; cxt.fillRect(0,100,175,50); // 把一副图像放在画布上...} else { document.getElementById("result").innerHTML = "抱歉！...else { document.getElementById("resu").innerHTML = "抱歉，您的浏览器不支持 server-sent 事件

1.7K5 0

jQuery 点击按钮打印指定文本内容

button class="printfFrom">打印快递单 $(".printfFrom").click(function(){ var printContents = document.getElementById...(divName).innerHTML; var originalContents = document.body.innerHTML; document.body.innerHTML...= printContents; window.print(); document.body.innerHTML = originalContents; }) 生成二维码及条形码...table", // 可采用canvas text: orderId.carrier_no, width:"70", height:"70" }); 当你的代码正确，而打印预览却没有显示出条形码及二维码时...; document.body.innerHTML = printContents; window.print();

4.1K2 0

H5新增的特性及语义化标签

如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。与标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。...Canvas – 图形创建一个画布，一个画布在网页中是一个矩形框，通过元素来绘制。默认情况下元素没有边框和内容。...你可以在HTML页面中使用多个元素使用Javascript来绘制图像，canvas 元素本身是没有绘图能力的。..."2d"); var img=document.getElementById("scream"); ctx.drawImage(img,10,10); 　　把一幅图像放置到了画布上 (5)SVG绘图...("result").innerHTML=event.data; }; } else { document.getElementById("result").innerHTML="Sorry, your

2.3K3 0

H5学习之路之初识canvas，了解下？

做上面的这个首先我们明确一下步骤： 1、画布 2、画网格（下面我会说为什么画网格） 3、（根据坐标）插图片 4、插入视频 ok，我们就这几个步分别介绍一下。...一个画布就好了 2、画网格 为什么要画网格呢？...mysecondcanvas");//第一步，拿到画布的元素 var cs = second.getContext("2d");//第二步，用getcontest方法准备画 for(var i =0;...("mysecondcanvas");//拿到画布元素 var cs = second.getContext("2d");//使用2D绘制其实这个是由很多的方法的，我们这里不一一的介绍了，简单的用W3cSchool...方法描述 createLinearGradient() 创建线性渐变（用在画布内容上）。 createPattern() 在指定的方向上重复指定的元素。

1.1K2 0

javaScript 原生DOM节点操作（最实用的dom节点操作大全）

节点的分类元素节点属性节点文本节点节点的操作元素节点操作通过元素的id来获取相应的节点 document.getElementById(""); 通过元素的标签名来获取节点 document.getElementsByTagName...注意：除了通过id选择节点的方式拿到的是一个确定的节点，其余的方式拿到的都会是一个数组，那么获取数组里面对应的节点需要用索引来取并且在Elements后面有s 例如：var body = document.ElementsByTagName...var div = document.getElementById("div"); div.innerHTML = "hello"; </body...看出来了吧，innerHTML和innerText是有本质上的区别的，innerHTML写入的内容可以解析成标签，而innerText写入的内容只能当作是文本在浏览器中显示。...简单讲，innerHTML可以在某种特定环境下重构某个元素节点的DOM结构，而innerText只能修改文本值总结原生的DOM节点操作还是非常简单实用的，除了单词长了一点以外好像也没有什么明显的缺点

1.8K2 0

基于Ext.Panel扩展一个更容易操作的Canvas

/* 画布类 xtype:"beidasoft.oe.canvas.panel" <script type="text/javascript" language="javascript...this.canvasID + this.id BeidaSoft.OE.Canvas.Panel.superclass.initComponent.call(this); }, //清理<em>画布</em>...cxt.font = "italic 20px 微软雅黑"; cxt.strokeText("李树强", 30, 50); }, //渲染实现Canvas标签的实例化以及canvas元素的引用... ].join("") var canvasHTML = String.format(canvasHTMLFormat, this.canvasID); this.body.dom.innerHTML... += canvasHTML; var canvas = document.getElementById(this.canvasID) this.canvas = canvas } });

75610 0

如何用 JavaScript 制作一个好用又好玩的图片压缩工具

drawWidth * scale : domImg.height; /* 画布生成 */ c.width = domImg_w; c.height = domImg_h; /* 在画布画图...= s_imgSize + " -> " + r_imgSize; } /* 粘贴事件后：获取粘贴图片，把 base64 数据扔给 drawimg() */ document.getElementById...document.body.appendChild(link); link.click(); document.body.removeChild(link); // 下载完成移除元素...然后图片 src 就是这个 base64，这样，就有了这个 img 元素了。 为什么创建 img ，因为目前我只知道画照片的办法，就是得有才行。...其实已经能拿到图片的 base64 源码了，那离计算其体积就不远了。

9352 0

HTML5 学习总结（四）——canvas绘图、WebGL、SVG

创建了canvas元素后，要在canvas元素上面绘制图象，首先必须获取canvas环境上下文： canvas.getContext(画布上绘制的类型) 2d：表示2维 experimental-webgl..."canvas1" width="800" height="600"> //获得画布元素...canvas1" width="800" height="600"> //获得画布元素...canvas1" width="600" height="600"> //获得画布元素...canvas1" width="600" height="600"> //获得画布元素

9.6K10 0

get两个js小技能——JS截取视频第一帧&图片转Base64

/div> function cutImage() { // 获取音频标签 let video = document.getElementById...imgUrl = canvas.toDataURL("image/png"); console.log('imgUrl :>> ', imgUrl); document.getElementById...当然在canvas画布中，当进行绘制图片时，最好还是先将图片img标签转换为base64之后进行drawImage()，避免画布被污染和跨域等问题。代码如下： <!...("base64").innerHTML = base64Url } ); } /**@url :图片服务器上的url * @img...img.onload = function () { const canvas = document.createElement("canvas"); //创建一个canvas元素

6.5K2 1

利用 leanCloud 实现点赞功能

var URL = location.pathname, //获取纯 url 防止重复筛选 el = document.getElementById("counter"), //写入元素...el_ = document.getElementById("like"); //点击元素 const likeCount = AV.Object.extend("likeCount...获取不到 class 404 出现这个问题的根本在构造对象完成后，没有进行数据储存操作，导致 SDK 没有自动创建我们指定的 class。...el.innerHTML=likeNum : el.innerHTML=0; //满足条件写入元素 updateAttr(objId,upAttr,1); //调用数据更新函数发送到云端...els.innerHTML = viewNum : false; //update之后执行（即使没有找到可用计数器也能记录并发送数据） }else{ //返回空数据时

1211 0

javascript之DOM操作

(node1.innerHTML); } 四、document.getElementsByClassName() 根据class获取元素节点 ...[3].innerHTML); //输出我是第一个P - 我是第二个P 为什么是1，3呢？...//输出我是第二个P alert(node2.previousElementSibling.innerHTML); //输出我是第一个P(第二个元素节点的上一个非文本元素节点是...P1) alert(node1.nextElementSibling.innerHTML); //输出我是第二个P(第一个元素节点的下一个兄弟非文本节点是P2)...1、removeChild(); 由父元素调用，删除一个子节点。注意是直接父元素调用，删除直接子元素才有效，删除孙子元素就没有效果了。

5312 1

一些小参考

这是一个在 div 元素中的文本。... canvas画布: 定义一个canvas画布 xxxxxxxxxx<canvas id="myCanvas" width="200" height="100" style="border...,这里就不会停止 w.onmessage = function(event) { <em>document.getElementById</em>("result").innerHTML...= event.data; }; } else { document.getElementById("result").innerHTML = "抱歉，你的浏览器不支持...("result").innerHTML="在这个会话中你已经点击了该按钮 " + sessionStorage.clickcount + " 次 "; } else { document.getElementById

6314 0

寻找可靠的长久的存储介质之旅，以及背后制作的三个网页

于是我就全存储到了 360 云盘上，因为存储介质在当时及其昂贵，一个蔫蔫数 GB 的内存卡就是好几天的饭钱，所以我几乎没有其他的备份，电脑的硬盘也好像很容易坏，总之我的数据没有备份，但是我未曾想到的是，...去年末我曾经找到一个叫 PaperBack 的软件来使用该方式打印到纸上，然后使用扫描仪就能还原数据，但是因为需要打印机与扫描仪共同配合使用，所以始终没有完整尝试过。于是想自制一个。...("myCanvas"); // canvas画布 let colorData = new Array; let canvasWidth = dom.width; // 获取 canvas 元素上的宽度...line" + line); result[line][key] = array[index]; if(key === (width - 1)){ // 如果到每一行的最后一个元素了...("tableDiv").innerHTML = outTableData; // 输出 } /** * 将图片源代码数据转化为二维数组 */ function dataTo2d(array,

8143 0

Canvas 进阶（三）ts + canvas 重写”辨色“小游戏

("canvas"), start: () => { document.getElementById("result").innerHTML = ""; document.getElementById...("screen").style.display = "none"; document.getElementById( "result" ).innerHTML...有一个特殊的地方是在清除画布时ctx.clearRect(0, 0, canvas.width, canvas.width);，需要先 ctx.beginPath();清除之前记忆的路径。...canvas.getContext("2d"); ctx.beginPath(); ctx.clearRect(0, 0, canvas.width, canvas.width); // 清除画布...o.hasOwnProperty(p) || override)) o[p] = n[p]; } } /** * 事件兼容方法 * @param element dom元素 * @param

1.1K1 0

Tensorflow.js 视频图片多目标检测

查看该函数所处 Coco-SSD 文件发现，detect 函数接收三个参数，第一个参数可以是 tensorflow 张量，也可以分别是 DOM 里的图片，视频，画布等 HTML 元素，第二第三个参数分别用于过滤返回结果的最大识别目标数和最小概率目标...("showBox"); showBox.innerHTML = "载入成功"; myModel = model; detectImage();..."; if (videoLoad) { myModel.detect(V).then(predictions => { showBox.innerHTML =..."检测结束"; const $imgbox = document.getElementById('img-box'); $imgbox.innerHTML =...transformWidth + 'px' $div.style.height = transformHeight + 'px' $div.innerHTML

1442 0

由重构进阶前端开发入门 (一) DOM 操作

具体点说，其实是浏览器拿到 Web 文档后，对 HTML 标签进行分析，处理成了对应的可操作对象，这类对象被称为文档对象模型(Document Object Model, DOM)。...这里只做简要介绍，涉及到 textContent 的兼容性问题，以及与 innerText、innerHTML 的区别问题，想要深入学习的可以参考：《JS魔法堂：被玩坏的innerHTML、innerText...而且，在父元素内已有大量子元素时，需要在子元素内删除成员或插入新成员时，直接修改父元素的 innerHTML 会导致所有子元素重新渲染，性能开销大。...list.innerHTML += newElements; 本质上其实是 var newHTML = list.innerHTML + newElements; list.innerHTML = newHTML...而且重新渲染创建的子元素与之前的子元素并非同一实例，会丢失之前对子元素绑定的事件监听器，导致各种意外情况，需要注意。 3.

7813 0

DOM「建议收藏」

先上一张图：图是w3schools教程中的，属性节点（红色框）的画法是很特别的，我第一次看教程没看懂为什么要这么画？难道其中有隐情？但是教程也都没有提及。可能很多人没注意，我现在来说一下。...因为属性节点实际上是附属于元素的，所以不被看做是元素的子节点，因为并没有被当做是DOM的一部分。...=demo; View Code 4、innerHTML innerHTML只对元素节点有用，获取元素节点内容，也就是元素节点包含的文本节点的值。...);//使用nodeValue进行访问 5、value 尽管innerHTML只对元素节点有用，但不是所有的元素节点都能使用innerHTML，比如像..."+oinput.innerHTML);//没有内容 console.log("oinput.value "+oinput.value);//获取input的value属性其实很好理解

9522 0

height、offsetheight、clientheight、scrollheight、innerheight、outerheight

("box").innerHTML=h1; document.getElementById("box2").innerHTML=h2; document.getElementById...("box3").innerHTML=h3; document.getElementById("box4").innerHTML=h4; document.getElementById...("box5").innerHTML=h5; document.getElementById("box6").innerHTML=h6; }) </...也是平时经常用到的offsetheight 它返回的高度是内容高+padding+边框，但是注意哦，木有加margin哦，当然一般也木有啥需要把margin加进去的，以上代码为例，结果显示上图h2；对了，为什么这个...为匹配的元素集合中获取第一个元素的当前计算高度值,包括padding，但是不包括border，结果显示上图h5。

1.4K2 0

APP内嵌H5页面中JS和APP的交互解决方案(可传参、可回调)

为什么选择 iframe.src 不选择 locaiton.href ？因为如果通过 location.href 连续调用 Native，很容易丢失一些调用。...('btn').onclick = function() { // Android端如果使用 messageHandlers 方式，HFWVBridge 即可； // 如果没有而是使用...* @desc 方式一：发送消息给app * @param {Any} 发送的消息 * @param {Function} 发送消息给app后的的回调，且能拿到...("show").innerHTML = "repsonseData from java, data = " + responseData } );...("show").innerHTML = "send get responseData from java, data = " + responseData }

6.3K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云