728x90
Hello Canvas!!
How to use Circle , radius, semicircle
소스보기해서 주석을 읽어보자
[SOURCE VIEW]
<!DOCTYPE html>
<head>
<meta charset = "utf-8" /> <!-- 한글께짐 방지 -->
<title>boolean's Canvas</title>
<link rel="stylesheet" type="text/css" href="/image/css/style.css" media="all">
<script type = "text/javascript" src = "/bootstrap/js/jquery-1.11.1.js"></script>
<style type="text/css">.another_category {
border: 1px solid #E5E5E5;
padding: 10px 10px 5px;
margin: 10px 0;
clear: both;
}
.another_category h4 {
font-size: 12px !important;
margin: 0 !important;
border-bottom: 1px solid #E5E5E5 !important;
padding: 2px 0 6px !important;
}
.another_category h4 a {
font-weight: bold !important;
}
.another_category table {
table-layout: fixed;
border-collapse: collapse;
width: 100% !important;
margin-top: 10px !important;
}
* html .another_category table {
width: auto !important;
}
*:first-child + html .another_category table {
width: auto !important;
}
.another_category th, .another_category td {
padding: 0 0 4px !important;
}
.another_category th {
text-align: left;
font-size: 12px !important;
font-weight: normal;
word-break: break-all;
overflow: hidden;
line-height: 1.5;
}
.another_category td {
text-align: right;
width: 80px;
font-size: 11px;
}
.another_category th a {
font-weight: normal;
text-decoration: none;
border: none !important;
}
.another_category th a.current {
font-weight: bold;
text-decoration: none !important;
border-bottom: 1px solid !important;
}
.another_category th span {
font-weight: normal;
text-decoration: none;
font: 10px Tahoma, Sans-serif;
border: none !important;
}
.another_category_color_gray, .another_category_color_gray h4 {
border-color: #E5E5E5 !important;
}
.another_category_color_gray * {
color: #909090 !important;
}
.another_category_color_gray th a.current {
border-color: #909090 !important;
}
.another_category_color_gray h4, .another_category_color_gray h4 a {
color: #737373 !important;
}
.another_category_color_red, .another_category_color_red h4 {
border-color: #F6D4D3 !important;
}
.another_category_color_red * {
color: #E86869 !important;
}
.another_category_color_red th a.current {
border-color: #E86869 !important;
}
.another_category_color_red h4, .another_category_color_red h4 a {
color: #ED0908 !important;
}
.another_category_color_green, .another_category_color_green h4 {
border-color: #CCE7C8 !important;
}
.another_category_color_green * {
color: #64C05B !important;
}
.another_category_color_green th a.current {
border-color: #64C05B !important;
}
.another_category_color_green h4, .another_category_color_green h4 a {
color: #3EA731 !important;
}
.another_category_color_blue, .another_category_color_blue h4 {
border-color: #C8DAF2 !important;
}
.another_category_color_blue * {
color: #477FD6 !important;
}
.another_category_color_blue th a.current {
border-color: #477FD6 !important;
}
.another_category_color_blue h4, .another_category_color_blue h4 a {
color: #1960CA !important;
}
.another_category_color_violet, .another_category_color_violet h4 {
border-color: #E1CEEC !important;
}
.another_category_color_violet * {
color: #9D64C5 !important;
}
.another_category_color_violet th a.current {
border-color: #9D64C5 !important;
}
.another_category_color_violet h4, .another_category_color_violet h4 a {
color: #7E2CB5 !important;
}
</style>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-7e0ff364db2dca01461081915f9748e9916c532a/static/style/revenue.css"/>
<link rel="canonical" href="https://booolean.tistory.com/202"/>
<!-- BEGIN STRUCTURED_DATA -->
<script type="application/ld+json">
{"@context":"http://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@id":"https://booolean.tistory.com/202","name":null},"url":"https://booolean.tistory.com/202","headline":"9. HTML5 Canvas [Circle , radius, semicircle]","description":"boolean's Canvas Hello Canvas!! How to use Circle , radius, semicircle 소스보기해서 주석을 읽어보자 [SOURCE VIEW] Hello Canvas!! How to use bezierCurveTo, cloud_shape 소스보기해서 주석을 읽어보자 If you can see this, I'm sorry. You need to get Google Chrome browser to see HTNL5 Canvas If you can see this, I'm sorry. You need to get Google Chrome browser to see HTNL5 Canvas","author":{"@type":"Person","name":"boolean","logo":null},"image":{"@type":"ImageObject","url":"https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Ftistory_admin%2Fstatic%2Fimages%2FopenGraph%2Fopengraph.png","width":"800px","height":"800px"},"datePublished":"2015-03-26T19:57:02+09:00","dateModified":"2015-04-05T21:50:09+09:00","publisher":{"@type":"Organization","name":"TISTORY","logo":{"@type":"ImageObject","url":"https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png","width":"800px","height":"800px"}}}
</script>
<!-- END STRUCTURED_DATA -->
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-7e0ff364db2dca01461081915f9748e9916c532a/static/style/dialog.css"/>
<link rel="stylesheet" type="text/css" href="//t1.daumcdn.net/tistory_admin/www/style/top/font.css"/>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-7e0ff364db2dca01461081915f9748e9916c532a/static/style/postBtn.css"/>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-7e0ff364db2dca01461081915f9748e9916c532a/static/style/tistory.css"/>
<script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-7e0ff364db2dca01461081915f9748e9916c532a/static/script/common.js"></script>
</head>
<h1>Hello Canvas!!</h1>
<br />
<h2>How to use <span id = "mspanred">bezierCurveTo, cloud_shape</span></h2>
<br />
<p>소스보기해서 주석을 읽어보자</p>
<canvas id = "myCanvas" width = "600" height = "400" style = "border:1px solid #000000">
If you can see this, I'm sorry. <br />
You need to get <a href = "https://www.google.com/chrome/browser/desktop/index.html">
Google Chrome browser</a> to see HTNL5 Canvas
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2*Math.PI,false);
context.fillStyle = 'green';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#003300';
context.stroke();
context.beginPath();
context.arc(400,75, 70, 0, Math.PI, false);
context.closePath(); //그림을 마무리한다.
context.fillStyle = 'red';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#550000';
context.stroke();
context.beginPath();
context.arc(400,300, 70, 0, 1.5*Math.PI, false);
context.fillStyle = 'red';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#550000';
context.stroke();
context.beginPath();
context.arc(100,75, 70, 0, Math.PI, false);
context.fillStyle = 'red';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#550000';
context.stroke();
context.beginPath();
context.arc(100,300, 70, 0, 1.5*Math.PI, false);
context.fillStyle = 'red';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#550000';
context.stroke();
</script>
'my_lesson > _HTML5' 카테고리의 다른 글
| 11. HTML5 Canvas [Global Alpha, Clipping Region] (0) | 2015.03.26 |
|---|---|
| 10. HTML5 Canvas [new Image(), pattern] (0) | 2015.03.26 |
| 8. HTML5 Canvas [bezierCurveTo, cloud_shape] (0) | 2015.03.26 |
| 7. HTML5 Canvas [drawimage, xPos, yPos] (0) | 2015.03.25 |
| 6. HTML5 Canvas [translate, rotate, scale, save, restore] (0) | 2015.03.25 |
댓글