Javascript canvas graphics Step 1 Find the Canvas

  • Slides: 15
Download presentation
Javascript canvas graphics Step 1: Find the Canvas Element This is done by using

Javascript canvas graphics Step 1: Find the Canvas Element This is done by using the HTML DOM method get. Element. By. Id(): var canvas = document. get. Element. By. Id("my. Canvas"); Step 2: Create a Drawing Object The get. Context() returns a built-in HTML object, Canvas. Rendering. Context 2 D, with properties and methods for drawing in 2 D. var ctx = canvas. get. Context("2 d"); Step 3: Draw on the Canvas Draw a rectangle Set the fill style of the drawing object to the color red: ctx. fill. Style = "#FF 0000"; The fill. Rect(x, y, width, height) method draws a rectangle, filled with the fill style, on the canvas: ctx. fill. Rect(0, 0, 150, 75); Draw a line ctx. move. To(0, 0); ctx. line. To(200, 100); ctx. stroke(); Draw a circle ctx. begin. Path(); ctx. arc(95, 50, 40, 0, 2*Math. PI); ctx. stroke();

<!DOCTYPE HTML> <canvas id= "canvas" width="600 px" height="300 px"></canvas> <script> var point. Size =

<!DOCTYPE HTML> <canvas id= "canvas" width="600 px" height="300 px"></canvas> <script> var point. Size = 10; draw. Coordinates(canvas. width/2, canvas. height/2); function draw. Coordinates(x, y){ var c = document. get. Element. By. Id("canvas"). get. Context("2 d"); c. fill. Style = ‘red’; // Red color c. begin. Path(); c. arc(x, y, point. Size, 0, Math. PI * 2, true); c. fill(); } draw. Coordinates(x, y) </script> draws </html> red circle at (x, y)

<!DOCTYPE HTML> <canvas id= "canvas" width="600 px" height="300 px"></canvas> <script> var point. Size =

<!DOCTYPE HTML> <canvas id= "canvas" width="600 px" height="300 px"></canvas> <script> var point. Size = 3; document. get. Element. By. Id("canvas"). add. Event. Listener("click", get. Position); function get. Position(event){ var x = event. client. X ; var y = event. client. Y; draw. Coordinates(x, y); } Mouse click draws red circle function draw. Coordinates(x, y){ var c = document. get. Element. By. Id("canvas"). get. Context("2 d"); c. fill. Style = ’red’; // Red color c. begin. Path(); c. arc(x, y, point. Size, 0, Math. PI * 2, true); c. fill(); } </script> </html>

<!DOCTYPE HTML> <canvas id= "canvas" width="600 px" height="300 px"></canvas> <script> var point. Size =

<!DOCTYPE HTML> <canvas id= "canvas" width="600 px" height="300 px"></canvas> <script> var point. Size = 3; var culoare=['red', yellow', 'green']; document. get. Element. By. Id("canvas"). add. Event. Listener("click", get. Position); function get. Position(event){ var x = event. client. X ; var y = event. client. Y; var b = event. button; draw. Coordinates(x, y, b); } function draw. Coordinates(x, y, b){ var c = document. get. Element. By. Id("canvas"). get. Context("2 d"); //document. write(Math. random()*3); c. fill. Style = culoare[b]; // b=0 red color left button // b=1 yello color middle button // b=2 green color right button c. begin. Path(); c. arc(x, y, point. Size, 0, Math. PI * 2, true); c. fill(); } </script>

document. get. Element. By. Id("canvas"). add. Event. Listener(“mousemove", get. Position); document. get. Element. By.

document. get. Element. By. Id("canvas"). add. Event. Listener(“mousemove", get. Position); document. get. Element. By. Id("canvas"). add. Event. Listener("mousemove", get. Position); document. get. Element. By. Id("canvas"). add. Event. Listener("click", change. Size); function change. Size(){ point. Size+=1; } //red green blue - integer numbers bwtween 0 and 255 function RGB ( red, green, blue){ var c =0 x 1000000+ blue + 0 x 100 * green + 0 x 10000 *red ; return '#'+c. to. String(16). substr(1); } r=x%256; g=(y)%256; b=(x*y)%256; c. fill. Style=RGB (r, g, b);

<!DOCTYPE HTML> <body> <canvas id="canvas" width="600 px" height="300 px"></canvas> <script> var point. Size =

<!DOCTYPE HTML> <body> <canvas id="canvas" width="600 px" height="300 px"></canvas> <script> var point. Size = 3; document. get. Element. By. Id("canvas"). add. Event. Listener("mousedown", function(){get. Position(event, 'red'); } ); document. get. Element. By. Id("canvas"). add. Event. Listener("mouseup", function(){get. Position(event, 'yellow'); } ); function get. Position(event, color ){ var x = event. client. X; var y = event. client. Y; draw. Coordinates(x, y, color ); } function draw. Coordinates(x, y, color){ var c = document. get. Element. By. Id("canvas"). get. Context("2 d"); c. fill. Style=color; c. begin. Path(); c. arc(x, y, point. Size, 0, Math. PI * 2, true); c. fill(); } </script> </body> </html>

document. get. Element. By. Id("canvas"). add. Event. Listener("mousedown", function(e){color='red'; } ); document. get. Element.

document. get. Element. By. Id("canvas"). add. Event. Listener("mousedown", function(e){color='red'; } ); document. get. Element. By. Id("canvas"). add. Event. Listener("mouseup", function(e){color='yellow'; } ); document. get. Element. By. Id("canvas"). add. Event. Listener("mousemove", function(e){get. Position(e, color); } ); document. get. Element. By. Id("canvas"). add. Event. Listener("mousedown", get. Position ); function draw. Coordinates(x, y){ var c = document. get. Element. By. Id("canvas"). get. Context("2 d"); c. fill. Style=color; c. begin. Path(); c. move. To(0, 0); c. line. To(x, y); c. stroke(); }

document. get. Element. By. Id("canvas"). add. Event. Listener("mousedown", do. Mouse. Down); document. get. Element.

document. get. Element. By. Id("canvas"). add. Event. Listener("mousedown", do. Mouse. Down); document. get. Element. By. Id("canvas"). add. Event. Listener("mouseup", do. Mouse. Up); var c = document. get. Element. By. Id("canvas"). get. Context("2 d"); function do. Mouse. Down(event) { x=event. page. X; y=event. page. Y; c. begin. Path(); c. move. To(x, y); } function do. Mouse. Up(event) { x=event. page. X; y=event. page. Y; c. line. To(x, y); c. stroke(); }

document. get. Element. By. Id("canvas"). add. Event. Listener("mousedown", do. Mouse. Down); var i=0; function

document. get. Element. By. Id("canvas"). add. Event. Listener("mousedown", do. Mouse. Down); var i=0; function do. Mouse. Down(event) { var c = document. get. Element. By. Id("canvas"). get. Context("2 d"); x=event. page. X; y=event. page. Y; i++; i%=2; If var i =true boolean if(i==1){ write the code! c. begin. Path(); c. move. To(x, y); } if(i==0){ c. line. To(x, y); c. stroke(); c. close. Path(); } }

var i=0, x 1, y 1; function do. Mouse. Down(event) { var c =

var i=0, x 1, y 1; function do. Mouse. Down(event) { var c = document. get. Element. By. Id("canvas"). get. Context("2 d"); x=event. page. X; y=event. page. Y; i++; i%=2; if(i==1){ x 1=x; y 1=y; } if(i==0){ c. fill. Style='red'; c. rect(x 1, y 1, x-x 1, y-y 1); c. fill(); } }

var i=0, x 1, y 1; function do. Mouse. Down(event) { x=event. page. X;

var i=0, x 1, y 1; function do. Mouse. Down(event) { x=event. page. X; y=event. page. Y; if(i==0){ x 1=x; y 1=y; i=1; } if(ii==1 && (x!=x 1 && y!=y 1) ){ var c = document. get. Element. By. Id("canvas"). get. Context("2 d"); c. fill. Style='red'; c. rect(x 1, y 1, x-x 1, y-y 1); c. fill(); i=0; } }

function do. Mouse. Down(event) { var c = document. get. Element. By. Id("canvas"). get.

function do. Mouse. Down(event) { var c = document. get. Element. By. Id("canvas"). get. Context("2 d"); vx=event. page. X/10; vy=(canvas. height-event. page. Y)/10; x=0, y=canvas. height, g=1, dt=1; //deseneaza o traiectorie parabolica for(i=0; i<100; i++) { c. begin. Path(); c. move. To(x, y); x += vx*dt; y += -vy*dt; vx += 0; vy += -g*dt; c. line. To(x, y); c. stroke(); } }

if( (x-x 0)*(x-x 0)+ (y-y 0)*(y-y 0)<r*r ) { alert("Ai nimerit tinta!"); }

if( (x-x 0)*(x-x 0)+ (y-y 0)*(y-y 0)<r*r ) { alert("Ai nimerit tinta!"); }

<!DOCTYPE HTML> <body> <span id="emo" style="font-size: 10 px" meta charset="UTF-8"> &#x 1 F 601

<!DOCTYPE HTML> <body> <span id="emo" style="font-size: 10 px" meta charset="UTF-8"> &#x 1 F 601 U+1 F 601</span> <p>Copy-paste emoji at !!! symbol</p> <span id="emo 2" style="font-size: 1 em"> !!�� U+1 F 601</span> <script> document. add. Event. Listener("click", change. Size); var q=0 x 1 F 601; function change. Size(event){ document. get. Element. By. Id("emo"). style. font. Size= parse. Float(document. get. Element. By. Id("emo"). style. font. Size)+10+"px"; document. get. Element. By. Id("emo 2"). style. font. Size= parse. Float(document. get. Element. By. Id("emo 2"). style. font. Size)+0. 2+"em"; q+=1; document. get. Element. By. Id("emo"). inner. Text = String. from. Code. Point(q)+"U+"+q. to. String(16). to. Upper. Case(); } </script> </body> </html>

var x=0, y=0, vx=2, vy=2; document. get. Element. By. Id("canvas"). add. Event. Listener("mousedown", do.

var x=0, y=0, vx=2, vy=2; document. get. Element. By. Id("canvas"). add. Event. Listener("mousedown", do. Mouse. Down); function do. Mouse. Down(event) { vx = (event. page. X-x) / 50; vy = (event. page. Y-y) / 50; } function miscare(){ var c = document. get. Element. By. Id("canvas"). get. Context("2 d"); c. fill. Style = 'white'; c. fill. Rect(0, 0, 600, 300); c. fill. Style = 'red'; c. fill. Rect(x, y, 20); //c. font="20 px Georgia"; //c. fill. Style='red'; Moves with velocity //c. fill. Text("Hey!"+ String. from. Code. Point(0 x 1 F 601), x, y); set by mouse relative position x += vx; y += vy; } set. Interval( miscare, 20);

JAVASCRIPT Presentation about Javascript language Javascript Java ScriptJAVASCRIPT Presentation about Javascript language Javascript Java Script
Pertemuan 1 Mengenal Javascript Javascript Javascript adalah bahasaPertemuan 1 Mengenal Javascript Javascript Javascript adalah bahasa
JAVASCRIPT PENGENALAN JAVASCRIPT Javascript diperkenalkan pertama kali olehJAVASCRIPT PENGENALAN JAVASCRIPT Javascript diperkenalkan pertama kali oleh
Javascript Cyndi Hageman Javascript Basics n n JavascriptJavascript Cyndi Hageman Javascript Basics n n Javascript
Pertemuan 1 Mengenal Javascript Javascript Javascript adalah bahasaPertemuan 1 Mengenal Javascript Javascript Javascript adalah bahasa
Graphics Drawing Canvas canvas new Drawing Canvas NoteGraphics Drawing Canvas canvas new Drawing Canvas Note
The Canvas Introducing the Canvas The canvas isThe Canvas Introducing the Canvas The canvas is
HTML Canvas canvas idmy Canvas width200 height100 styleborderHTML Canvas canvas idmy Canvas width200 height100 styleborder
Welcome to Canvas How to access canvas CANVASWelcome to Canvas How to access canvas CANVAS
Canvas Business Model Modelo Canvas o Mtodo CanvasCanvas Business Model Modelo Canvas o Mtodo Canvas
HTML 5 CANVAS UVOD HTML 5 Canvas CanvasHTML 5 CANVAS UVOD HTML 5 Canvas Canvas
Canvas Overview for Parents What is Canvas CanvasCanvas Overview for Parents What is Canvas Canvas
Canvas n 1 Canvas Drawing Canvas Width FillCanvas n 1 Canvas Drawing Canvas Width Fill
Canvas Notes Canvas Element canvas Used to drawCanvas Notes Canvas Element canvas Used to draw