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

HTML5初级知识总结

2016-04-15 00:00 423 查看


1.canvas绘制

步骤

添加canvas元素，定义id和范围

js里获取canvas元素

通过getContext()方法获取2D绘制环境

通过不同的函数进行图形绘制

坐标定位

绘制的图形定位都是以canvas的左上角为(0,0)原点

绘制直线

moveTo(): 规定起始点

lineTo(): 从起点绘制到规定坐标的直线

stroke(): 实现绘制直线的功能

fill(): 实现填充功能

实例：绘制一个三角形

html代码

<body> <canvas id="canvas"></canvas> </body>

js代码

window.onload = function(){ var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 800; var context = canvas.getContext('2d');

context.strokeStyle = "red";
context.moveTo(100, 100);
context.lineTo(200, 100);
context.lineTo(150,50);
context.lineTo(100,100);
context.stroke();
};



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