|
|
|
|||||||
| Javascript Här diskuteras det som rör Javascript, AJAX, DOM & DHTML. |
|
|
Trådverktyg | Visningsalternativ |
2012-08-01, 12:57
|
#1 |
|
Medlem
Registrerad: 2006-01-15
Inlägg: 86
Lösningar: 0 |
hjälp med local storage
det här med local storage är nytt för mig. jag har en sida med en canvas där det ritas en cirkel när man klickar på canvasen. det finns även en knapp (clear) som rensar canvasen.
Nu vill jag kunna spara med hjälp av local storage, - om jag ritat en cirkel eller flera och utan att klicka på clear knappen, jag uppdaterar sidan och då ska jag kunna få tillbaka sidan med dem eller den cirkel som jag fanns innan jag uppdaterade sidan. Hoppas att ni förstår vad jag menar...för det är ju meningen med localstorage väl. Jag har försökt med följande kod vid window.onload var canvas = document.getElementById('myCanvas') var ctx = canvas.getContext("2d"); var img = new Image(); img.onload = function() { canvas.width = this.width; cavans.height = this.height; ctx.drawImage(this, 0, 0); var base64jpeg = canvas.toDataURL("image/jpeg"); } img.src = "/images/myjpeg.jpg"; men det har inte funkat. Jag behöver helt enkelt hjälp med detta! Här är min kod i html5 och javascript HTML5 Kod:
<!DOCTYPE html>
<html>
<head>
<title>localstorage </title>
<script type="text/javascript" src="./localstor.js"></script>
<meta charset="utf-8" />
</head>
<body >
<section>
<div class="ritytor" >
<button id="clear" type="button" >Clear</button>
<canvas id="myCanvas" width="500" height="400" style="border:1px solid #c3c3c3;" onclick="UpdateInfo (event);">
Your browser dosen't support the HTML5 canvas.</canvas><br />
</div>
<div >
Color <select id="colorSelector" name="color" onchange="chosenColor();">
<option selected="selected" value="#000000">Black</option>
<option value="#0000FF">Blue</option>
<option value="#FF0000">Red</option>
<option value="#FFA500">Orange</option>
<option value="#FFFF00">Yellow</option>
<option value="#FFC0CB">Pink</option>
<option value="#808080">Gray</option>
<option value="#008000">Green</option>
</select>
Size <select id="sizeSelector" name="color" onchange="chosenSize();">
<option value="100">10</option>
<option value="90">9</option>
<option value="80">8</option>
<option value="70">7</option>
<option value="60">6</option>
<option value="50">5</option>
<option value="40">4</option>
<option value="30">3</option>
<option selected="selected" value="20">2</option>
<option value="10">1</option>
</select>
<p> Please click in the canvas below to draw a circle of your chosen color and size</p>
</div>
</section>
</body>
</html>
Kod:
"use strict";
window.onload = function() {
canvasText();
}
//draw circle at the cordinates of the mouse
function UpdateInfo (event) {
var pageX = event.pageX;
var pageY = event.pageY-75;
var si=document.getElementById("sizeSelector");
var strSize = si.options[si.selectedIndex].value;
drawCircle(pageX,pageY,strSize);
}
//draw circle function
function drawCircle(x,y,si){
si=chosenSize();
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(x, y);
ctx.beginPath();
ctx.arc(x,y,si,0,Math.PI*2,false);
ctx.closePath();
ctx.strokeStyle = chosenColor();
ctx.fillStyle= chosenColor();
ctx.stroke();
ctx.fill();
//clear the canvas by clicking clear
document.getElementById('clear').onclick = function() {
ctx.save();
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, c.width, c.height);
ctx.restore();
}
}
//choose drawing color function
function chosenColor(){
var co=document.getElementById("colorSelector");
var strColor = co.options[co.selectedIndex].value;
return strColor;
}
//choose drawing size function
function chosenSize(){
var si=document.getElementById("sizeSelector");
var strSize = si.options[si.selectedIndex].value;
return strSize;
}
//canvas text b4 drawing
function canvasText(){
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="18px sans-serif";
ctx.fillText("Please click to draw a circle or circles", 60, 200);
}
|
|
|
| |
| Trådverktyg | |
| Visningsalternativ | |
|
|
Trådad visning