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

学习笔记：HTML5 Canvas绘制简单图形

2015-02-05 11:21 766 查看

　HTML5 Canvas绘制简单图形

　　1.添加Canvas标签，添加id供js操作。

<canvas id="mycanvas" height="700" width="1024" style="border:1px solid #aaa;text-align:center;">
你的浏览器不支持Canvas，请更新浏览器再试！！！
</canvas>

　　在canvas标签之间应该做浏览器是否支持的检测，如果浏览器支持canvas，标签首尾之间的这段文字会直接被忽略的。当然实际工作中应该不只是这么一句简单提示就可以了。

　　2.获取context，调用moveTo(),lineTo(),stroke()方法绘制线。　　

<html>
<head>
<title>你好</title>
</head>
<body onload="onload()">
<canvas id="mycanvas" height="700" width="1024" style="border:1px solid #aaa;text-align:center;">
你的浏览器不支持Canvas，请更新浏览器再试！！！
</canvas>
<script type="text/javascript">
function onload(){
var canvas =document.getElementById("mycanvas");
//canvas.height=700;
//canvas.width=1024;
var context=canvas.getContext("2d");//2d画布
if(!context)
{
alert("你的浏览器不支持Canvas，请更新浏览器再试！！！");
return;
}
var paths=[
{
path:[
{x:0,y:0},
{x:200,y:200},
{x:0,y:400}],
fill:"#005588"
},{
path:[
{x:0,y:0},
{x:200,y:200},
{x:400,y:0}],
fill:"green"
},{
path:[
{x:0,y:400},
{x:400,y:400},
{x:400,y:0}],
fill:"yellow"
}
]
for(var i=0;i<paths.length;i++)
{
Draw(paths[i],context);
}
}
function Draw(objPath,context){

var path=objPath["path"];
var fillStyle=objPath["fill"];

context.beginPath();//开始一段新路径
context.moveTo(path[0]["x"],path[0]["y"]);
for(var i=1;i<path.length;i++)
{
context.lineTo(path[i]["x"],path[i]["y"]);
}
context.closePath();//结束当前路径，并强制封闭路径
context.fillStyle=fillStyle;//填充颜色
context.fill();//开始填充
context.lineWidth=1;//线宽
context.strokeStyle="red";//线条着色
context.stroke();//开始绘制路径
}
</script>
</body>
</html>

半成品Demo
　　

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航