document.getElementById("id").getContext("2d")这个对象在哪里可以查看有哪些方法和属性?

document.getElementById("id").getContext("2d")这个对象在哪里可以查看有哪些方法和属性?

5个回答

HTML5 Canvas 2D API 规范 1.0 中文版
[url]http://wenku.baidu.com/view/d841013d0912a2161479292d.html[/url]

这是百度文库的,W3C 官方也应该有,不过可能会是英文的。

js提示对吧,一般装eclipse装插件js插件
或者直接使用高版本的 Adobe Dreamweaver CS5 js,jquery都有提示。

iteye_5246
iteye_5246 http://wenku.baidu.com/view/d841013d0912a2161479292d.html 多累啊。写个html还要看文档。又不是html5
7 年多之前 回复
gaojuan0540402
gaojuan0540402 有没有相关的帮助文档呢?
7 年多之前 回复

查DHTML手册啊

可以查手册,但是稍微旧版的浏览器可能不支持这些新特性!!!

搜狐浏览器,装个firebug插件。可以查看

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
fileObj = document.getElementById("file").files[0]; 我想直接把地址给这个变量
``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>压缩图片demo</title> </head> <body> <img id="img" src=""> <input id="file" type="file" onchange="compress()"> </body> <script> // 对图片进行压缩 function compress() { if(typeof FileReader=='undifined')            //判断浏览器是否支持filereader      {         result.innerHTML="<p>抱歉,你的浏览器不支持 FileReader</p>";         return false;     }     var file=document.getElementById("file").files[0];     if(!/image\/\w+/.test(file.type))            //判断获取的是否为图片文件     {         alert("请确保文件为图像文件");         return false;     } fileObj = document.getElementById('file').files[0] //上传文件的对象 reader = new FileReader() reader.readAsDataURL(fileObj) reader.onload = function(e) { image = new Image() //新建一个img标签(还没嵌入DOM节点) image.src = e.target.result image.onload = function() { canvas = document.createElement('canvas'), context = canvas.getContext('2d'), imageWidth = image.width / 10, //压缩后图片的大小 imageHeight = image.height / 10, data = '' canvas.width = imageWidth canvas.height = imageHeight context.drawImage(image, 0, 0, imageWidth, imageHeight) data = canvas.toDataURL('image/jpeg') //压缩完成 document.getElementById('img').src = data } } } </script> </html> ``` 上面是压缩图片的案例,我 不想用按钮,想直接把“1.jpg”赋值给fileObj,请问该怎么办??
手机端web网站一个很神奇的bug求助。关于按钮的click事件执行的问题。
首先这个问题是出子在手机端web访问网站上出现的,电脑上用谷歌访问就没有这个问题。 问题是这样的 我现在有两个方法 ``` function test2() { DoKoutu(); test(); } ``` 然后我把这几个方法绑定到几个按钮上 ``` <button id="koutubtn" class="buttonblue" style="width: 300px; height: 120px" onclick="DoKoutu();">抠图完成</button> <button id ="kakaka" class="buttonred" style="width: 300px; height: 120px" onclick="test();">保存111</button> <button id ="kakaka2" class="buttonred" style="width: 300px; height: 120px" onclick="test2();">保存222</button> ``` 我的问题是这样的 当我分别点 抠图完成和保存111两个按钮的时候 按理说 就执行了DoKoutu()的方法和test()的方法。执行的结果是我想要的 但是我只点击保存222这个按钮的时候,按理说不就是一起执行了DoKoutu()和test()的方法么,结果执行的结果就不是我想要的, 这是为什么呢??求助 ps: 我的函数主题有绑定一些事件的代码,是跟这块有关系么?? ``` document.getElementById("canvasmovediv").addEventListener(STA_EN, start, false); document.getElementById("canvasmovediv").addEventListener(MV_EV, move, false); document.getElementById("canvasmovediv").addEventListener(END_EV, end, false); document.getElementById("canvasmovediv").addEventListener(END_EV, end, false); ``` ps2:主要用了canvas里面的一些东西。上面的move,start什么的是变量,有定义的。 ``` function DoKoutu() { IsKouTuOk = true; a.fillBackColor(); a.CreateClipArea(); //重建个画布,用透明的颜色把取到的点重新截取一遍图,就没有蓝线了,目的是没有蓝线 //document.getElementById("canvasDiv1").style.display = "none"; //这一段要是智能成图的话就不用执行了 if (!IsAutoKouTu) { document.getElementById("img3").src = document.getElementById("img1").src; $("#img1").attr("src", $("#canvas")[0].toDataURL("image/png")); var b = document.getElementById("canvas2").getContext("2d"); var bobject = document.getElementById("canvas2"); b.beginPath(); for (var i = 0; i < a.can.pointList.length; i++) { b.lineTo(a.can.pointList[i].pointx, a.can.pointList[i].pointy); } b.closePath(); b.clip(); _("img3").style.width = _("img1").style.width; _("img3").style.height = _("img1").style.height; var image = document.getElementById("img3"); //drawImage的没问题 b.drawImage(image, 0, 0, _("img1").style.width.replace("px", ""), _("img1").style.height.replace("px", "")); } else { var b = document.getElementById("canvas2").getContext("2d"); var bobject = document.getElementById("canvas2"); var image = document.getElementById("img1"); $("#img5").attr("src", _("img1").src); b.drawImage(image, 0, 0, parseInt(_("img1").style.width.replace("px", "")), parseInt(_("img1").style.height.replace("px", ""))); } //两个画布隐藏或者显示一下,截图用的画布隐藏,显示用的画布显示 document.getElementById("canvasdrowDiv").style.display = "none"; document.getElementById("canvasmovediv").style.display = ""; //放到一个隐藏的img上 再让这个img写回来(前清空) //把全图画在另一张行的div上 //如果是自动抠图的话,直接image1的画上去,image1为智能抠图完成之后的结果 $("#img4").attr("src", $("#canvas2")[0].toDataURL("image/png")); var imagetemp = document.getElementById("img4"); // var imageback = document.getElementById("img2"); document.getElementById("canvasmovediv").addEventListener(STA_EN, start, false); document.getElementById("canvasmovediv").addEventListener(MV_EV, move, false); document.getElementById("canvasmovediv").addEventListener(END_EV, end, false); document.getElementById("canvasmovediv").addEventListener(END_EV, end, false); SuoFangbeishu = 1; //滚轮缩放倍数初始为1 _("canvasmovediv").onmousewheel = scrollFnc; //test(); return true; } ``` function test() { var imagetemp = document.getElementById("img4"); c = _("canvas3"); ctx = c.getContext("2d"); ctx.drawImage(imagetemp, 0, 0, 940, 800); ctxW = c.width; ctxH = c.height; imgW = 940 || img.width; imgH = 800 || img.height; ctx.translate(imgW / 2, imgH / 2); //onDraw(); ctx.save(); //选的背景图片替换div的背景图片 document.getElementById("canvasmovediv").style.backgroundImage = "url(" + document.getElementById("img2").src + ")"; //抠图完成的按钮变为无法使用 _("koutubtn").disabled = "disabled"; _("koutubtn").className = "buttonblue disabledblue"; _("autokoutubtn").disabled = "disabled"; _("autokoutubtn").className = "buttongreen disabledgreen"; onDraw(); return true; }
利用HTML5的画布功能,通过按钮加载一张图片,为什么显示不了啊
``` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>加载图片</title> </head> <body> <canvas id="demo" width="400" height="400" style="border:1px solid red"></canvas> <script type="text/javascript"> var canvas = document.getElementById("demo"); var cxt = canvas.getContext("2d"); function preImg(sourceId, targetId) { cxt.clearRect(0, 0, 400, 400); if (typeof FileReader === 'undefined') { alert('Your browser does not support FileReader...'); return; } var reader = new FileReader(); reader.onload = function (e) { var img = document.getElementById(targetId); var cxt = document.getElementById("demo").getContext("2d") img.src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1557124323,393705227&fm=116&gp=0.jpg"; img.onload = function () { cxt.drawImage(img, 0, 0); } } reader.readAsDataURL(document.getElementById(sourceId).files[0]); } </script> <input name="button" type="button" id="bt_display" onclick="preImg(sourceId, targetId)" value="图片一"/> </body> </html> ```
使用canvas画图报 is notfunction
``` ``` <body> <canvas id="myCanvas" width="200" height="100"></canvas> </body> var c=document.getElementById("myCanvas"); /* var c=$("#myCanvas"); //这个地方为什么使用$获取div后面报getContext() is not function ??*/ var cxt=c.getContext("2d"); 我使用getElementById()成立,但是使用$("#myCanvas")的时候在c.getContext("2d")的时候报getContext is not function? 这是什么问题?
想要在html5 canvas画布中打开一张本地图片,代码有什么问题
``` <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script type="text/javascript"> var canvas=document.getElementById("demo"); var cxt=canvas.getContext("2d"); //打开图片 function preImg(sourceId, targetId) { cxt.clearRect(0,0,400,400); if (typeof FileReader === 'undefined') { alert('Your browser does not support FileReader...'); return; } var reader = new FileReader(); reader.onload = function(e) { var img = document.getElementById(targetId); var cxt=document.getElementById("demo").getContext("2d") img.src = this.result; img.onload=function() { cxt.drawImage(img,0,0); } } reader.readAsDataURL(document.getElementById(sourceId).files[0]); } </script> </head> <body> <form action=""> <input type="file" name="imgOne" id="imgOne" onchange="preImg(this.id,'imgPre');" /> <img id="imgPre" src="" style="display: block;" /> </form> <canvas id="demo" width="400" height="400" style="border:1px solid red"></canvas> </body> </html> ```
html中的canvas小问题
别人的: <canvas id="myCanvas" width="200" height="100" style="border:1px solid red;"></canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#ccc"; cxt.fillRect(5,10,150,60); //x,y,x,y </script> 我的: <canvas id="mycanvas" width="200" height="100" style="border:1px solid #c3c3c3;"></canvas> <script type="text/javascript"> var c=document.getelementbyid("mycanvas"); var cxt=c.getcontext("2d"); cxt.fillstyle="#ccc">; cxt.fillrect(5,10,150,60);//x,y,x,y </script> 为啥我的没有填充效果啊?没写错啊
HTML5的canvas标签为什么会覆盖之前画的东西的颜色
![图片说明](https://img-ask.csdn.net/upload/201712/03/1512305137_554765.png) 请注意这条线是黑色的 我选择颜色画第二条![图片说明](https://img-ask.csdn.net/upload/201712/03/1512305162_311961.png) 为什么左边那条线变成红色了,被我选择的颜色给覆盖了??? 源代码/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0 auto; } canvas{ border:1px solid red; } </style> </head> <body> <div> 背景颜色:<input type="color" onchange="penColorChange()"> 画笔颜色:<input type="color"> 画笔粗细: <select id="selected"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>10</option> </select> </div> <canvas width="1349" height="1000" id="my_canvas"> 你的浏览器不支持canvas标签 </canvas> <p id = "p_1"></p> </body> <script> var b = false; var canvas = document.getElementById("my_canvas"); var draw =canvas.getContext("2d"); document.getElementById("my_canvas").onmousedown = function (e) { draw.moveTo(e.offsetX,e.offsetY); b = true; } document.getElementById("my_canvas").onmousemove = function (e) { if(b){ draw.lineTo(e.offsetX,e.offsetY) draw.stroke(); } document.getElementById("p_1").innerHTML = e.offsetX+" " +e.clientY; } document.getElementById("my_canvas").onmouseup=function () { b = false; } //画笔颜色变换 function penColorChange() { draw.strokeStyle="red"; } </script> </html> ``` ```
如何对IE浏览器中的ActiveX插件进行视频截图
//object进行视频电脑端的视频录制 <object name="webcam1" id="webcam1"></object> //js代码使用canvas进行截图 var canvas = document.createElement("canvas"); var canvasCtx = canvas.getContext("2d"); var video = document.getElementById("webcam1"); canvasCtx.drawImage(video,0,0,500,500); var dataUrl = canvas.toDataURL(); console.log(dataUrl); 只能截图video标签的,请问如何截取object播放的图片
canvas的drawImage出现的问题
如下是我的全部代码,在谷歌浏览器中运行,但是canvas就是画不出图片。求大神指点,哪里写的有问题? ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="root"> </div> <img id="preview" src="http://img02.tooopen.com/images/20140504/sy_60294738471.jpg" /> <script> var img = document.getElementById('preview'); document.getElementById('root').appendChild(convertImageToCanvas(img)); function convertImageToCanvas(image) { var canvas = document.createElement("canvas"); canvas.setAttribute('style','border:1px solid #000'); canvas.getContext("2d").drawImage(image, 0, 0); canvas.width = image.width; canvas.height = image.height; return canvas; } </script> </body> </html> ```
js Uncaught SyntaxError: Unexpected token }
``` 源代码 <script> window.onload=function(){ c=document.getElementById("tu"); var p= c.getContext("2d"); var p= c.getContext("2d"); function a(e){ c.mousedown(function(e){ p.moveTo(e.clientX-10,e.clientY-10); c.onmousemove=function(e){ p.lineTo(e.screenX,e.screenY-50); p.stroke(); } } } } </script> <body> <canvas width="900" height="600" id="tu"></canvas> </body> ```
Html5 canvas 基础demo 为什么都没有
``` <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); </script> </head> <body> <canvas id="myCanvas" width="320" height="220"></canvas> </body> </html> ```
调用摄像头直接把画面显示在html页面上(请哪位大神帮帮忙)
调用摄像头直接把画面显示在html页面上(在不联网的情况下可以使用) 在网上找个一段h5的例子,但是运行的时候报错。不知道缺失什么文件 <video id="video" autoplay=""style='width:640px;height:480px'></video> <button id='picture'>PICTURE</button> <canvas id="canvas" width="640" height="480"></canvas> <script> var video = document.getElementById("video"); var context = canvas.getContext("2d"); var errocb = function () { console.log('sth wrong!'); }; if (navigator.getUserMedia) { // 标准的API navigator.getUserMedia({ "video": true }, function (stream) { video.src = stream; video.play(); }, errocb); } else if (navigator.webkitGetUserMedia) { // WebKit 核心的API navigator.webkitGetUserMedia({ "video": true }, function (stream) { video.src = window.webkitURL.createObjectURL(stream); video.play(); }, errocb); } document.getElementById("picture").addEventListener("click", function () { context.drawImage(video, 0, 0, 640, 480); }); </script>
js中定义的函数在button中的onclick调用时显示函数未定义
<!doctype html> <html> <head> <meta charset="utf-8"> <title>螺旋图案</title> <script type="text/javascript"> var canvas=document.getElementById("canvas"); var context=canvas.getContext("2d"); var A,n; btn_onclick=function(){ var width=canvas.width; var height=canvas.height; var X0=width/2; var Y0=height/2; var k=parseInt(document.getElementById("drawType").value); if(k==2) A=Y0*0.25; else A=Y0*0.75; context.save(); context.clearRect(0,0,width,height); context.translate(X0,Y0); context.beginPath(); for(var B=0;B<=6.28;B=B+0.01) draw(B); context.closePath(); context.restore(); } draw=function(B){ var n=10; switch(parseInt(document.getElementById("drawType").value)){ case 1: r=A*Math.sin(n*B); break; case 2: r=A*(Math.sin(n*B)+3*Math.sin(3*n*B)); } x=r*Math.cos(B); y=r*Math.sin(B); context.fillStyle="green"; context.strokeStyle="black"; context.lineTo(-x,-y); context.fill(); context.stroke(); } </script> </head> <body> <select id="drawType"> <option value="1">蓬莱菊花</option> <option value="2">令箭荷花</option> </select> <canvas id="canvas" width="200px" height="200px"></canvas> <input type="button" id="btn" value="绘制" onClick="btn_onclick();"/> </body> </html>
多个本地视频如何切换到一个canvas里下面代码会显示多个视频重叠在一起求解啊aaaaa
``` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>网络视频Demo</title> <script type="text/javascript" src="jquery.min.js"> </script> <script> $(function() { $("#vv").on("click", "li video", function() { var $v = $(this); var v = $v[0]; var c = $("#myCanvas")[0]; var ctx = c.getContext("2d"); ctx.clearRect(0,0,500, 500); //alert("ssd"); var i =setInterval(function() { ctx.drawImage(v, 0, 0, 500, 500) }, 20); }); }) </script> </head> <body> <input type="file" id="file" onchange="onInputFileChange()" /> <div> <ul id="vv"> </ul> </div> <div id="d"> <canvas id="myCanvas" width="500" height="500"></canvas> </div> <script> function onInputFileChange() { var file = document.getElementById('file').files[0]; var url = URL.createObjectURL(file); //document.getElementById("vv").innerHTML="<video src="+url+" controls autoplay >"; var sli = '<li><video src='+url+' width="270" controls autoplay loop/></li>'; var $li = $(sli); $("#vv").append($li); } </script> </body> </html> ```
求助大神~网页中调用摄像头左右方向反了额,用拍照软件试了,摄像头本身没问题,下面是代码
``` <!DOCTYPE HTML > <html> <head> <title>cam.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <video id="video" autoplay=""style='width:600px;height:400px'></video> <button id='picture'>拍照</button> <canvas id="canvas" width="600" height="400"></canvas> <script type="text/javascript"> var video = document.getElementById("video"); var context = canvas.getContext("2d") var errocb = function () { console.log('sth wrong!'); } if (navigator.getUserMedia) { // 标准的API navigator.getUserMedia({ "video": true }, function (stream) { video.src = stream; video.play(); }, errocb); } else if (navigator.webkitGetUserMedia) { // WebKit 核心的API navigator.webkitGetUserMedia({ "video": true }, function (stream) { video.src = window.webkitURL.createObjectURL(stream); video.play(); }, errocb); } document.getElementById("picture").addEventListener("click", function () { context.drawImage(video, 0, 0, 600, 400); }); </script> </body> </html> ```
在canvas中图片旋转的问题
在canvas中插入图片,当点击右箭头时,图片顺时针旋转90°,但是点击时没有效果,到底哪里错了,请各位老师指教,非常谢谢! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> body{ background:black; } </style> <script> window.onload = function() { var aInput = document.getElementsByName("input"); var oImg = document.getElementById("img1"); var yImg = new Image(); var iNow = 0; yImg.onload = function() { draw(oImg); } yImg.src = oImg.src; function draw(obj) { var oC = document.createElement("canvas"); var oGC = oC.getContext('2d'); oC.width = obj.width; oC.height = obj.height; obj.parentNode.replaceChild(oC,obj); oGC.drawImage(obj,0,0); aInput[1].onclick = function() { iNow++; toChange(); } function toChange() { switch(iNow) { case 1: oC.width = obj.height; oC.height = obj.width; oGC.rotate(90*Math.PI/180); oGC.drawImage(obj,0,-obj.height); break; } } } } </script> </head> <body> <input type="button" value="←" /> <input type="button" value="→" /> <div> <img src="a.jpg" id="img1" /> </div> </body> </html>
aspx中canvas的问题,急急急急!!!!!!!!!!!
``` <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Canvas.aspx.cs" Inherits="H5Canvas.ASPX.Canvas" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> canvas{ position: absolute; } </style> </head> <body onload="draw('myCanvas')"> <button onclick="drawsmall()">添加canvas</button> <button onclick="clearcanvas()">清空</button> <button onclick="show()">清空</button> <form id="form1" runat="server"> <div> <asp:Button ID="btnSubmit" runat="server" Text="Submit" onclientclick="drawsmall()" /> <div id="divcanvas"> <canvas id="myCanvas" width="1800" height="1000" style="height:500px;width:1000px;border:1px red solid"></canvas> </div> </div> </form> <script> function draw(id) { var canvas = document.getElementById(id); var context = canvas.getContext("2d"); //context.fillStyle = "#0000FF"; //context.fillRect(0, 0, 400, 650); image = new Image(); image.src = "/Content/img/background_1.jpg"; image.onload = function () { DrawBigImage(context, image); } } function DrawBigImage(context, image) { context.drawImage(image, 0, 0, image.width, image.height); } function drawsmall() { var json = <%=ConvertGoodsToJson()%> ; var obj = eval (json.Table); for (var i =0 ; i<obj.length ; i++) { var newcanvas = document.createElement("canvas"); newcanvas.id = 'newcanvas'; newcanvas.width = 2000; newcanvas.height = 500; var divcanvas = document.getElementById('divcanvas'); divcanvas.appendChild(newcanvas); var canvas = document.getElementById("newcanvas"); var context = canvas.getContext("2d"); image = new Image(); image.src = obj[i].URL; var q=obj[i].URL; var w=obj[i].XAXES; var e=obj[i].YAXES; image.onload = function () { context.drawImage(image, obj[i].XAXES, obj[i].YAXES, image.width, image.height); } } } function clearcanvas() { var clear = document.getElementById("newcanvas"); // clear.parentNode.removeChild(clear); clear.remove(); } </script> </body> </html> ``` ``` using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Configuration; using System.Web.UI; using System.Web.UI.WebControls; using System.Data; using System.Data.OracleClient; using System.Text; namespace H5Canvas.ASPX { public partial class Canvas : System.Web.UI.Page { public static string connStr = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString; public static DataTable ExecuteDatatable(string sql) { using (OracleConnection conn = new OracleConnection(connStr)) { conn.Open(); using (OracleCommand cmd = new OracleCommand(sql, conn)) { OracleDataAdapter adapter = new OracleDataAdapter(cmd); DataSet dataset = new DataSet(); adapter.Fill(dataset); return dataset.Tables[0]; } } } public string ConvertDataTableToJson(DataTable dt) { StringBuilder sbs = new StringBuilder(); if (dt.Rows.Count > 0)//如果有记录 { sbs.Append("{'" + dt.TableName + "':["); string str = ""; foreach (DataRow dr in dt.Rows)//开始拼 { string result = ""; foreach (DataColumn dc in dt.Columns) { result += string.Format(",'{0}':'{1}'", dc.ColumnName, dr[dc.ColumnName]); } result = result.Substring(1); result = ",{" + result + "}"; str += result; } str = str.Substring(1); sbs.Append(str); sbs.Append("]}"); } else//如果没有记录 { sbs.Append(""); } return sbs.ToString(); } public string ConvertGoodsToJson() { DataTable dt = new DataTable(); dt = ExecuteDatatable("select * from t_canvas where property='1'"); return ConvertDataTableToJson(dt); } } } ``` 不知道为什么点击Submit或者添加canvas的按钮都不会画出来图片,用火狐测试数据都是读出来了的(q,w,e这些),但就是画不出来,望高手指点,谢谢!
怎么把js函数的参数变成全局变量,用到后面的函数中运算
通过函数计算得到gwp的数值,如果转化成全局变量值,用到后面的绘图函数中 ``` var gwp1=[]; $(function(){ var dom = document.getElementById("box4"); var myChart = echarts.init(dom); var app = {}; option = null; var y_f = []; //全局变量,wgid在gognweizongtu.js中获取 var gwp = 0; var xishu = [0.4,0.2,0.3,0.1]; var pjx = ["gzp","gyp","wlp","ryp"]; var pj = {"gongzhuang":"OK", "gongyi": "OK", "wuliao": "OK", "renyuan": "OK"}; var guige = [90, 90, 80, 75,85]; var xiang = ["gongzhuang","gongyi","wuliao","renyuan"]; for (var i = 0 ; i< xiang.length ; i++) { var lent = data[xiang[i]].y.length ; var ind = lent - 1 ; y_f.push(data[xiang[i]].y[ind]); if (data[xiang[i]].y[ind] < guige[i]){ pj[xiang[i]] = "NOK"; } document.getElementById(pjx[i]).innerHTML = pj[xiang[i]]; gwp += y_f[i]*xishu[i]; } y_f.push(88); if (gwp > 85.5){ document.getElementById("gwpj").innerHTML ="OK"; } gwp = gwp.toFixed(2); /*绘图代码省略*/ }; if (option && typeof option === "object") { myChart.setOption(option, true); } }) ``` 上部分代码得到gwp的数值,如何用到后面的画圆代码 darwPro("myCanvas",gwp/100);,画圆时老是提示gwp值为空 ``` <!-- 圆弧绘制--> //画圆方法 function drawArc(canvas,begin,end,color) { canvas.beginPath(); canvas.lineWidth = 6; canvas.fillStyle = "#ffffff"; canvas.strokeStyle = color; canvas.arc(48, 48, 40, begin,end); canvas.fill(); canvas.stroke(); canvas.closePath(); } //添加文字方法 function drawWord(canvas,text){ canvas.font = 'bold 20px arial'; canvas.fillStyle = 'red'; canvas.fillText(text, 30,53); } //每100毫秒画一次,300毫秒完成 function darwPro(id,rate){ //获取画布对象 var canvasID = document.getElementById("myCanvas"); var canvas = canvasID.getContext("2d"); window.alert(rate); //先画背景 drawArc(canvas,-0.5*Math.PI,1.5*Math.PI,"#EDEDED"); //setInterval()函数至少执行一次(当rate为零时直接返回) if(rate == 0){ return; } //为了体现动态图使用分段画图的策略 var begin = -0.5*Math.PI;//起始角度 var end = 2*Math.PI*rate-0.5*Math.PI;//结束角度 var add = 2*Math.PI*rate/10;//分段的增量 //分10次完成每次间隔50毫秒 var sid = setInterval(function(){ if(begin >= end){ clearInterval(sid); return;//此处必须return;因为即使clearInterval,函数仍然会执行一次导致比例不准确 } drawArc(canvas,begin, begin + add,"green"); //下次起始位置置为上次结束的位置 begin = begin + add; }, 50); //显示百分比的文字 drawWord(canvas,rate*100 + "%"); } darwPro("myCanvas",gwp/100); ```
html canvas渲染字体的问题
为什么字体会变这么大,有没有什么解决办法 ``` <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> #canvas{ width: 100%; height: 100%; background-color: #000; } </style> <body> <canvas id="canvas"> </canvas> </body> <script> var can =document.getElementById('canvas'); var ctx =can.getContext("2d"); ctx.fillStyle="#fff"; ctx.font="5px Arial"; ctx.fillText("helloWorld",20,20) </script> </html> ``` 问题已经解决了,在此说明下希望帮助到遇到同样问题的同学,就是canvas的宽和高不要设置在css中 不管是外部引入的还是style行间的.直接在canvas后接宽高设置就好了 如下 ``` <canvas id="canvas" width="800px" height="800px"> </canvas> ```
在中国程序员是青春饭吗?
今年,我也32了 ,为了不给大家误导,咨询了猎头、圈内好友,以及年过35岁的几位老程序员……舍了老脸去揭人家伤疤……希望能给大家以帮助,记得帮我点赞哦。 目录: 你以为的人生 一次又一次的伤害 猎头界的真相 如何应对互联网行业的「中年危机」 一、你以为的人生 刚入行时,拿着傲人的工资,想着好好干,以为我们的人生是这样的: 等真到了那一天,你会发现,你的人生很可能是这样的: ...
《MySQL 性能优化》之理解 MySQL 体系结构
本文介绍 MySQL 的体系结构,包括物理结构、逻辑结构以及插件式存储引擎。
程序员请照顾好自己,周末病魔差点一套带走我。
程序员在一个周末的时间,得了重病,差点当场去世,还好及时挽救回来了。
复习一周,京东+百度一面,不小心都拿了Offer
京东和百度一面都问了啥,面试官百般刁难,可惜我全会。
Java 14 都快来了,为什么还有这么多人固守Java 8?
从Java 9开始,Java版本的发布就让人眼花缭乱了。每隔6个月,都会冒出一个新版本出来,Java 10 , Java 11, Java 12, Java 13, 到2020年3月份,...
达摩院十大科技趋势发布:2020 非同小可!
【CSDN编者按】1月2日,阿里巴巴发布《达摩院2020十大科技趋势》,十大科技趋势分别是:人工智能从感知智能向认知智能演进;计算存储一体化突破AI算力瓶颈;工业互联网的超融合;机器间大规模协作成为可能;模块化降低芯片设计门槛;规模化生产级区块链应用将走入大众;量子计算进入攻坚期;新材料推动半导体器件革新;保护数据隐私的AI技术将加速落地;云成为IT技术创新的中心 。 新的画卷,正在徐徐展开。...
轻松搭建基于 SpringBoot + Vue 的 Web 商城应用
首先介绍下在本文出现的几个比较重要的概念: 函数计算(Function Compute): 函数计算是一个事件驱动的服务,通过函数计算,用户无需管理服务器等运行情况,只需编写代码并上传。函数计算准备计算资源,并以弹性伸缩的方式运行用户代码,而用户只需根据实际代码运行所消耗的资源进行付费。Fun: Fun 是一个用于支持 Serverless 应用部署的工具,能帮助您便捷地管理函数计算、API ...
讲真,这两个IDE插件,可以让你写出质量杠杠的代码
周末躺在床上看《拯救大兵瑞恩》 周末在闲逛的时候,发现了两个优秀的 IDE 插件,据说可以提高代码的质量,我就安装了一下,试了试以后发现,确实很不错,就推荐给大家。 01、Alibaba Java 代码规范插件 《阿里巴巴 Java 开发手册》,相信大家都不会感到陌生,其 IDEA 插件的下载次数据说达到了 80 万次,我今天又贡献了一次。嘿嘿。 该项目的插件地址: https://github....
Python+OpenCV实时图像处理
目录 1、导入库文件 2、设计GUI 3、调用摄像头 4、实时图像处理 4.1、阈值二值化 4.2、边缘检测 4.3、轮廓检测 4.4、高斯滤波 4.5、色彩转换 4.6、调节对比度 5、退出系统 初学OpenCV图像处理的小伙伴肯定对什么高斯函数、滤波处理、阈值二值化等特性非常头疼,这里给各位分享一个小项目,可通过摄像头实时动态查看各类图像处理的特点,也可对各位调参、测试...
2020年一线城市程序员工资大调查
人才需求 一线城市共发布岗位38115个,招聘120827人。 其中 beijing 22805 guangzhou 25081 shanghai 39614 shenzhen 33327 工资分布 2020年中国一线城市程序员的平均工资为16285元,工资中位数为14583元,其中95%的人的工资位于5000到20000元之间。 和往年数据比较: yea...
为什么猝死的都是程序员,基本上不见产品经理猝死呢?
相信大家时不时听到程序员猝死的消息,但是基本上听不到产品经理猝死的消息,这是为什么呢? 我们先百度搜一下:程序员猝死,出现将近700多万条搜索结果: 搜索一下:产品经理猝死,只有400万条的搜索结果,从搜索结果数量上来看,程序员猝死的搜索结果就比产品经理猝死的搜索结果高了一倍,而且从下图可以看到,首页里面的五条搜索结果,其实只有两条才是符合条件。 所以程序员猝死的概率真的比产品经理大,并不是错...
害怕面试被问HashMap?这一篇就搞定了!
声明:本文以jdk1.8为主! 搞定HashMap 作为一个Java从业者,面试的时候肯定会被问到过HashMap,因为对于HashMap来说,可以说是Java集合中的精髓了,如果你觉得自己对它掌握的还不够好,我想今天这篇文章会非常适合你,至少,看了今天这篇文章,以后不怕面试被问HashMap了 其实在我学习HashMap的过程中,我个人觉得HashMap还是挺复杂的,如果真的想把它搞得明明白...
毕业5年,我问遍了身边的大佬,总结了他们的学习方法
我问了身边10个大佬,总结了他们的学习方法,原来成功都是有迹可循的。
python爬取百部电影数据,我分析出了一个残酷的真相
2019年就这么匆匆过去了,就在前几天国家电影局发布了2019年中国电影市场数据,数据显示去年总票房为642.66亿元,同比增长5.4%;国产电影总票房411.75亿元,同比增长8.65%,市场占比 64.07%;城市院线观影人次17.27亿,同比增长0.64%。 看上去似乎是一片大好对不对?不过作为一名严谨求实的数据分析师,我从官方数据中看出了一点端倪:国产票房增幅都已经高达8.65%了,为什...
推荐10个堪称神器的学习网站
每天都会收到很多读者的私信,问我:“二哥,有什么推荐的学习网站吗?最近很浮躁,手头的一些网站都看烦了,想看看二哥这里有什么新鲜货。” 今天一早做了个恶梦,梦到被老板辞退了。虽然说在我们公司,只有我辞退老板的份,没有老板辞退我这一说,但是还是被吓得 4 点多都起来了。(主要是因为我掌握着公司所有的核心源码,哈哈哈) 既然 4 点多起来,就得好好利用起来。于是我就挑选了 10 个堪称神器的学习网站,推...
这些软件太强了,Windows必装!尤其程序员!
Windows可谓是大多数人的生产力工具,集娱乐办公于一体,虽然在程序员这个群体中都说苹果是信仰,但是大部分不都是从Windows过来的,而且现在依然有很多的程序员用Windows。 所以,今天我就把我私藏的Windows必装的软件分享给大家,如果有一个你没有用过甚至没有听过,那你就赚了????,这可都是提升你幸福感的高效率生产力工具哦! 走起!???? NO、1 ScreenToGif 屏幕,摄像头和白板...
阿里面试,面试官没想到一个ArrayList,我都能跟他扯半小时
我是真的没想到,面试官会这样问我ArrayList。
曾经优秀的人,怎么就突然不优秀了。
职场上有很多辛酸事,很多合伙人出局的故事,很多技术骨干被裁员的故事。说来模板都类似,曾经是名校毕业,曾经是优秀员工,曾经被领导表扬,曾经业绩突出,然而突然有一天,因为种种原因,被裁员了,...
大学四年因为知道了这32个网站,我成了别人眼中的大神!
依稀记得,毕业那天,我们导员发给我毕业证的时候对我说“你可是咱们系的风云人物啊”,哎呀,别提当时多开心啦????,嗯,我们导员是所有导员中最帅的一个,真的???? 不过,导员说的是实话,很多人都叫我大神的,为啥,因为我知道这32个网站啊,你说强不强????,这次是绝对的干货,看好啦,走起来! PS:每个网站都是学计算机混互联网必须知道的,真的牛杯,我就不过多介绍了,大家自行探索,觉得没用的,尽管留言吐槽吧???? 社...
良心推荐,我珍藏的一些Chrome插件
上次搬家的时候,发了一个朋友圈,附带的照片中不小心暴露了自己的 Chrome 浏览器插件之多,于是就有小伙伴评论说分享一下我觉得还不错的浏览器插件。 我下面就把我日常工作和学习中经常用到的一些 Chrome 浏览器插件分享给大家,随便一个都能提高你的“生活品质”和工作效率。 Markdown Here Markdown Here 可以让你更愉快的写邮件,由于支持 Markdown 直接转电子邮...
看完这篇HTTP,跟面试官扯皮就没问题了
我是一名程序员,我的主要编程语言是 Java,我更是一名 Web 开发人员,所以我必须要了解 HTTP,所以本篇文章就来带你从 HTTP 入门到进阶,看完让你有一种恍然大悟、醍醐灌顶的感觉。 最初在有网络之前,我们的电脑都是单机的,单机系统是孤立的,我还记得 05 年前那会儿家里有个电脑,想打电脑游戏还得两个人在一个电脑上玩儿,及其不方便。我就想为什么家里人不让上网,我的同学 xxx 家里有网,每...
2020 年,大火的 Python 和 JavaScript 是否会被取而代之?
Python 和 JavaScript 是目前最火的两大编程语言,但是2020 年,什么编程语言将会取而代之呢? 作者 |Richard Kenneth Eng 译者 |明明如月,责编 | 郭芮 出品 | CSDN(ID:CSDNnews) 以下为译文: Python 和 JavaScript 是目前最火的两大编程语言。然而,他们不可能永远屹立不倒。最终,必将像其他编程语言一...
史上最全的IDEA快捷键总结
现在Idea成了主流开发工具,这篇博客对其使用的快捷键做了总结,希望对大家的开发工作有所帮助。
阿里程序员写了一个新手都写不出的低级bug,被骂惨了。
这种新手都不会范的错,居然被一个工作好几年的小伙子写出来,差点被当场开除了。
谁是华为扫地僧?
是的,华为也有扫地僧!2020年2月11-12日,“养在深闺人不知”的华为2012实验室扫地僧们,将在华为开发者大会2020(Cloud)上,和大家见面。到时,你可以和扫地僧们,吃一个洋...
Idea 中最常用的10款插件(提高开发效率),一定要学会使用!
学习使用一些插件,可以提高开发效率。对于我们开发人员很有帮助。这篇博客介绍了开发中使用的插件。
AI 没让人类失业,搞 AI 的人先失业了
最近和几个 AI 领域的大佬闲聊 根据他们讲的消息和段子 改编出下面这个故事 如有雷同 都是巧合 1. 老王创业失败,被限制高消费 “这里写我跑路的消息实在太夸张了。” 王葱葱哼笑一下,把消息分享给群里。 阿杰也看了消息,笑了笑。在座几位也都笑了。 王葱葱是个有名的人物,21岁那年以全额奖学金进入 KMU 攻读人工智能博士,累计发表论文 40 余篇,个人技术博客更是成为深度学习领域内风向标。 ...
2020年,冯唐49岁:我给20、30岁IT职场年轻人的建议
点击“技术领导力”关注∆每天早上8:30推送 作者|Mr.K 编辑| Emma 来源|技术领导力(ID:jishulingdaoli) 前天的推文《冯唐:职场人35岁以后,方法论比经验重要》,收到了不少读者的反馈,觉得挺受启发。其实,冯唐写了不少关于职场方面的文章,都挺不错的。可惜大家只记住了“春风十里不如你”、“如何避免成为油腻腻的中年人”等不那么正经的文章。 本文整理了冯...
作为一名大学生,如何在B站上快乐的学习?
B站是个宝,谁用谁知道???? 作为一名大学生,你必须掌握的一项能力就是自学能力,很多看起来很牛X的人,你可以了解下,人家私底下一定是花大量的时间自学的,你可能会说,我也想学习啊,可是嘞,该学习啥嘞,不怕告诉你,互联网时代,最不缺的就是学习资源,最宝贵的是啥? 你可能会说是时间,不,不是时间,而是你的注意力,懂了吧! 那么,你说学习资源多,我咋不知道,那今天我就告诉你一个你必须知道的学习的地方,人称...
那些年,我们信了课本里的那些鬼话
教材永远都是有错误的,从小学到大学,我们不断的学习了很多错误知识。 斑羚飞渡 在我们学习的很多小学课文里,有很多是错误文章,或者说是假课文。像《斑羚飞渡》: 随着镰刀头羊的那声吼叫,整个斑羚群迅速分成两拨,老年斑羚为一拨,年轻斑羚为一拨。 就在这时,我看见,从那拨老斑羚里走出一只公斑羚来。公斑羚朝那拨年轻斑羚示意性地咩了一声,一只半大的斑羚应声走了出来。一老一少走到伤心崖,后退了几步,突...
立即提问