HTML5 Canvas & Canvas.js Tutorial


HTML5 Canvas Tutorial Movie on Youtube HP HTML5 Canvas さまざまな図形を描く HP KineticJS HP HTML5 Canvas Tutorial

cercle.jpg

<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></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();
</script>
</body>
</html>

Kentic1.jpg

<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile</title>
<script src="kinetic.min.js"></script>
</head>
<body>
<div id="canvas1"></div>
<script>
window.onload = function() {
var stage = new Kinetic.Stage({
container:"canvas1",
width:300,
height:200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x:100,
y:50,
width:100,
height:50,
stroke:"red"
});
layer.add(rect);
stage.add(layer);
};
</script>
</body>
</html>


関連記事

 プログラミング


全タイトルを表示

openclose

プルダウン 降順 昇順 年別

01月 | 2020年02月 | 03月
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29


全タイトルを表示

​海遊旅人 - Photography ​海遊旅人 - VideoGraphy ​201200819the_wagyu_database2.jpg 201200819google_drive2.jpg 20120829weer_tech00.jpg

名前:
メール:
件名:
本文:

QRコード
・最近記事のRSS
・最新コメントのRSS
・最新トラックバックのRSS


new BL TP ML gif_anime vimeo youtube
Google Picasa flickr Facebook Pin
Globe

*