JavaScript JavaScript Canvas examples

2015.11.10 21:29

JavaScript Canvas examples

Canvas Examples

A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content.

The markup looks like this:

Note: Always specify an id attribute (to be referred to in a script), and a width and height attribute to define the size of the canvas.

To add a border, use the style attribute:

Basic Canvas Example

Try it yourself »

Drawing with JavaScript

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);

Try it yourself »

Draw a Line

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

Try it Yourself »

Draw a Circle

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

Try it Yourself »

Draw a Text

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);

Try it Yourself »

Stroke Text

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50);

Try it Yourself »

Draw Linear Gradient

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);

Try it Yourself »

Draw Circular Gradient

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);

Try it Yourself »

Draw Image

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10);

Try it Yourself »

HTML Canvas Tutorial

To learn all about HTML <canvas>, Visit our full HTML Canvas Tutorial.

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

[출처] http://www.w3schools.com/html/html5_canvas.asp

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.

JavaScript Canvas examples, 이 게시물을

번호	제목	글쓴이	날짜	조회 수
14	JSON 객체를 String으로 변환하기	졸리운_곰	2016.11.16	611
13	D3.js 시작하기	졸리운_곰	2016.11.16	653
12	[JQuery] 셀렉터 및 함수 정리	졸리운_곰	2016.11.15	620
11	[jQueryUI] jqGrid 사용하기 - 2	졸리운_곰	2016.08.28	947
10	[jQueryUI] 기본 개념 및 사용하기 - 1	졸리운_곰	2016.08.28	376
9	A very long AngularJS tutorial	졸리운_곰	2016.07.21	900
8	AngularJS 소개 - 특징, 철학, 주요 개념, 동작 방식	졸리운_곰	2016.07.20	595
7	angularjs 에서 php 서비스 콜하고 json으로 리턴 받기	졸리운_곰	2016.07.19	645
6	자바스크립트 프레임워크_AngularJS 기본개념 강좌	졸리운_곰	2016.07.19	563
5	[번역] 하루만에 끝내는 AngularJS	졸리운_곰	2016.07.19	790
4	Writing a Javascript REST client	졸리운_곰	2016.06.06	366
3	[인공지능 자바스크립트] Neural Networks in JavaScript with Brain.js	졸리운_곰	2016.06.05	622
2	GitHub Training Kit : in order to make online workbook by sjkim comphy	졸리운_곰	2016.05.17	270
1	node-Tor : JavaScript (node.js) On Tor network	졸리운_곰	2016.05.04	450

첫 페이지 1 2 끝 페이지

쓰기

태그

JavaScript JavaScript Canvas examples

JavaScript Canvas examples

Canvas Examples

Basic Canvas Example

Drawing with JavaScript

Draw a Line

Draw a Circle

Draw a Text

Stroke Text

Draw Linear Gradient

Draw Circular Gradient

Draw Image

HTML Canvas Tutorial

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다. 어린이용이며, 설치가 필요없는 브라우저 게임입니다. https://s1004games.com

댓글 0

로그인

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com