- 전체
- HTML
- Web Design (웹디자인)
- XE 응용 개발
- wordpress plugin dev
- Javascript & JavaScript Application
- MEAN Stack : full stack javascript
- angular js & ionic framework
- bootstrap
- WebGL, Three.js and Babylon.js
- restful api design
- mobile web
- node.js 응용
- Cloud Service 응용
- 웹 어셈블리 개발 [WASM, WebAssembly]
- 마이크로서비스, MSA (microservice architecture)
- WebGL / WebGPU
- next.js 개발
- micro frontend (마이크로프론트앤드)
- 전자상거래/쇼핑몰
- 서버 클라우드 (aws, azure, google)
JavaScript basic plot graph by javascript, 자바스크립트로 그래프그리기 초간단
2015.11.13 12:22
basic plot graph by javascript,
자바스크립트로 그래프그리기 초간단
| Question: How do I plot a graph of a mathematical function using JavaScript?
Answer: To plot a graph of a function on your webpage, use the Example: Here is a graph of the functions sin x (green) and cos 3x (blue). The graph has been created using the following JavaScript code:
function fun1(x) {return Math.sin(x); }
function fun2(x) {return Math.cos(3*x);}
function draw() {
var canvas = document.getElementById("canvas");
if (null==canvas || !canvas.getContext) return;
var axes={}, ctx=canvas.getContext("2d");
axes.x0 = .5 + .5*canvas.width; // x0 pixels from left to x=0
axes.y0 = .5 + .5*canvas.height; // y0 pixels from top to y=0
axes.scale = 40; // 40 pixels from x=0 to x=1
axes.doNegativeX = true;
showAxes(ctx,axes);
funGraph(ctx,axes,fun1,"rgb(11,153,11)",1);
funGraph(ctx,axes,fun2,"rgb(66,44,255)",2);
}
function funGraph (ctx,axes,func,color,thick) {
var xx, yy, dx=4, x0=axes.x0, y0=axes.y0, scale=axes.scale;
var iMax = Math.round((ctx.canvas.width-x0)/dx);
var iMin = axes.doNegativeX ? Math.round(-x0/dx) : 0;
ctx.beginPath();
ctx.lineWidth = thick;
ctx.strokeStyle = color;
for (var i=iMin;i<=iMax;i++) {
xx = dx*i; yy = scale*func(xx/scale);
if (i==iMin) ctx.moveTo(x0+xx,y0-yy);
else ctx.lineTo(x0+xx,y0-yy);
}
ctx.stroke();
}
function showAxes(ctx,axes) {
var x0=axes.x0, w=ctx.canvas.width;
var y0=axes.y0, h=ctx.canvas.height;
var xmin = axes.doNegativeX ? 0 : x0;
ctx.beginPath();
ctx.strokeStyle = "rgb(128,128,128)";
ctx.moveTo(xmin,y0); ctx.lineTo(w,y0); // X axis
ctx.moveTo(x0,0); ctx.lineTo(x0,h); // Y axis
ctx.stroke();
}
It is safe to call the draw() function after the entire body of the webpage is loaded. The source code of an HTML page containing the canvas element may look like this:
<!DOCTYPE html> <html> <head><title>Canvas code example</title> <script type="text/javascript"> // JavaScript source code goes here </script> </head> <body onload="draw()"> <canvas id="canvas" width="502" height="108"></canvas> </body> </html> Note: If you omit the See also: |
[출처] http://www.javascripter.net/faq/plotafunctiongraph.htm
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
댓글 0
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
|---|---|---|---|---|
| 7 | [전자상거래/쇼핑몰 개발] [카페24쇼핑몰] 품목생성형과 상품연동형 옵션의 차이점이 궁금합니다. | 졸리운_곰 | 2024.07.30 | 385 |
| 6 |
[전자상거래/쇼핑몰 개발] cafe24 MySQL db 외부접속 방법
 | 졸리운_곰 | 2024.07.23 | 566 |
| 5 |
[전자상거래/쇼핑몰 개발] 초보 셀러를 위한 쇼피파이(Shopify) 제작 가이드
| 졸리운_곰 | 2024.07.03 | 585 |
| 4 |
[전자상거래/쇼핑몰 개발] [카페24쇼핑몰] [API] Cafe24 - API 호출 예시
| 졸리운_곰 | 2024.06.25 | 413 |
| 3 | [전자상거래/쇼핑몰 개발] [카페24쇼핑몰] 카페24 무료 쇼핑몰 가입 | 졸리운_곰 | 2024.05.20 | 543 |
| 2 | [전자상거래/쇼핑몰 개발] [카페24쇼핑몰] 카페24 쇼핑몰 상세화면 설정 | 졸리운_곰 | 2024.05.20 | 244 |
| 1 |
[전자상거래/쇼핑몰 개발] [카페24쇼핑몰] 상품상세 검색
| 졸리운_곰 | 2024.05.17 | 611 |