您的位置：首页 > Web前端 > HTML5

HTML5快速入门实例（一）Canvas绘制图形

2015-03-26 14:59 591 查看
文字性的东西太多就不写了，网上很多。

我的代码注释也很详细，毕竟学习嘛。

介绍一下，开发工具用的是webstrom，真的很好用喔！

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Html5游戏开发学习1-Canvas</title>
</head>
<body>
<canvas id="canvas" width="600" height="600" style="broder:black 1px solid;">
浏览器不支持HTML5 canvas
</canvas>
<script type="text/javascript" charset="utf-8">
//获取canvas对象的引用
var canvas = document.getElementById('canvas');
//获取canvas的2d绘图环境
var context = canvas.getContext('2d');
//绘图代码如下:
//1.实心正方形 x,y,width,length
context.fillRect(200,10,100,100);
//2.实心矩形
context.fillRect(50,70,90,30);
//3.绘制一个空心矩形
context.strokeRect(110,10,50,50);
context.strokeRect(30,10,50,50);
//清除矩形区域 x,y,width,length
context.clearRect(210,20,30,20);
context.clearRect(260,20,30,20);
//4.开始绘制路径
context.beginPath();
context.moveTo(10,120);
context.lineTo(10,180);
context.lineTo(110,150);
context.fill(); //闭合形状并且以填充的方式绘制出来
//5.三角形的外边框
context.beginPath();
context.moveTo(140,160);//从该点开始
context.lineTo(140,220);
context.lineTo(40,190);
context.closePath();
context.stroke();//空心
//绘制弧
//6.半圆弧
context.beginPath();
//x,y,半径,开始角度,终止角度,顺时针(false)/逆时针(true)
context.arc(100,300,40,0,Math.PI,true);
context.stroke();
//7.实心圆
context.beginPath();
context.arc(100,300,30,0,2*Math.PI,true);
context.fill();
</script>
</body>
</html>

以下是代码运行效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html5 html5游戏开发 html canvas
相关文章推荐
新的分享
章节导航