Gtjkyu

Posts

Showing posts with the label html5

Change color Image in Canvas

Change color Image in Canvas I want to change color a Image in canvas this is the Image You can see there is a Image transparent I was try using PutImgData but my transparent is changing color Is there anyway to change color the car and money only ? I was using this code : var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d"), image = document.getElementById("testImage"); canvas.height = canvas.width = 100; ctx.fillStyle = 'red'; ctx.fillRect(10,10,20,10); ctx.drawImage(image,0,0); var imgd = ctx.getImageData(0, 0, 45, 45), pix = imgd.data; for (var i = 0, n = pix.length; i <n; i += 4) { if(pix[i+3]==0) {continue;} pix.length[i]=r|pix.length[i]; pix.length[i+1]=g|pix.length[i+1]; pix.length[i+2]=b|pix.length[i+2]; pix[i + 3] = 255; } ctx.putImageData(imgd, 0, 0); 1 Answer 1 To mix manually you would have to...

Fixed floating aside on the right

Fixed floating aside on the right I have a situation like this : <!DOCTYPE HTML> <html> <head> <title>test</title> </head> <style> #wrapper { width: 1100px; margin: 0px auto; } #wrapper #stream { width: 790px; float: left; border: 1px solid red; } #wrapper aside { width: 270px; float: left; border: 1px solid red; } </style> <body> <section id="wrapper"> <section id="stream"> some text... </section> <aside> <ul> <li>something</li> <li>something</li> <li>something</li> <li>something</li> </ul> </aside> </section> </body> </html> and i want that the sidebar does...

Images not displaying the first time in this object program in JS

Images not displaying the first time in this object program in JS I am making a battleship game with polar coordinates. After the user chooses two points, a battleship should be drawn in the middle. My Battleship constructor looks like this: function Battleship(size, location, source){ this.size = size; //initializing the image this.image = new Image(); this.image.src = source; this.getMiddlePoint = function(){ //get midpoint of ship ... } this.distanceBetween = function(t1, t2){ //dist between two points } this.display = function(){ var point = [this.radius]; point.push(this.getMiddlePoint()); point = polarToReal(point[0], point[1] * Math.PI / 12); //now point has canvas coordinates of midpoint var width = this.distanceBetween(this.info[0][0], this.info[this.info.length-1][0]); var ratio = this.image.width / width; ...

JQuery doesn't work with bootstrap

JQuery doesn't work with bootstrap I have a simple form in html5 with Bootstrap, but my JQuery doesn't work correctly, i'm trying with simply alerts without responses. <!DOCTYPE html> <html> <head> <title>Index Tecatche</title> <meta charset="utf-8"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/index.js"></script> <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css"> </head> <body> <div class="form-group"> <label>Email</label> <input type="email" class="form-control" id="txt_email" placeholder="Email"> </div> <div class="form-group"> <label>Password</label> ...

Html 5 video / audio pitch

Html 5 video / audio pitch I am facing the problem i want to use the html5 video player, but with a pitched sound. what i have tried so far is setting the playbackrate of the html5 player higher and then lower, but this only messes with the playback rate (as it actually tells us). It does not change the pitch of the audio of this html5 video-player. I know this google chrome plugin: https://chrome.google.com/webstore/detail/pitch-shifter-html5-video/mpmkclglcbkjchakihfpblainfncennj?hl=en-GB This does change the pitch of html5 players, but i dont know how to do the same but then without any plugins and just programmatically do this. I have looked through the docs of HTML 5 video: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement but this does not give me an answer. Can anybody help me? does this help - stackoverflow.com/a/12610497/1569675 – Offbeatmammal Oct 3 '17 at 10:38 ...

Javascript make audio blob

Javascript make audio blob I am testing the html audio tag and I would like to make audio blob url's , like youtube or vimeo does, and add it to the "src" to start playing the audio. I've been testing with new Blob() and URL.createObjectURL() but I don't know how to use it. new Blob() URL.createObjectURL() I would like to do something like: <audio controls src"blob:null/8142a612-29ad-4220-af08-9a31c55ed078"></audio> <audio controls src"blob:null/8142a612-29ad-4220-af08-9a31c55ed078"></audio> I would greatly appreciate your help. 1 Answer 1 Suppose you have base64 encoded version of audio like this data="data:audio/ogg;base64,T2dnUwACAAAAAAAAAADSeWyXAU9nZ1MAAAAAAAAAAAAA0nl"; 1.First remove the base64 headers (preamble) and decode it to pure binary form, the form it lies in as in your iPad. You can use convertDataURIToBinar...

How to reduce top menu bar height

How to reduce top menu bar height I am trying to reduce the size of the top bar menu . But their is a only option I found that is line-height . I just set the height of the top bar class but it's not working. How can I make the header Height smaller?? Web Site Url: http://starconsortiumbd.com/ Html Code <div class="col-sm-6"> <div class="header-right-bar text-right"> <ul class="contact-wrapper"> <li class="acces"> <ul> <li><i class="fa fa-envelope" aria-hidden="true"></i></li> <li> <a href="#"></a><a href="#">info@starconsortiumbd.com</a></li> </ul> </li> <li> <ul class="social-icon"> <li><a href="https://www.facebook.com/starconsortiumbd/" target="_blank"><...