html5 ——canvas绘制直线和多边形
2018-05-12 本文已影响0人
夜空中乄最亮的星
使用如下方法可绘制直线：
context.moveTo(100,100);
context.lineTo(700,700);//可多次调用形成连线
图形填充
context.fillStyle="rgb(183,69,76)";
context.fill();
图形绘制
context.stroke();
必须明白convas 的绘制是基于状态的进行绘制的，绘制多个图形将绘制代码放在begainPath和closePath之间，以防止被覆盖
context.begainPath()
....
context.closePath()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id='canvas' width="1024" height="768" style="border: 1px solid #aaa;display: block;margin: 5px;">
当前浏览器存在兼容性问题
</canvas>
<script>
window.onload=function() {
var canvas=document.getElementById('canvas');
canvas.width=1024;
canvas.height=768;
var context=canvas.getContext("2d");
if(canvas){
context.moveTo(100,100);
context.lineTo(700,700);
context.stroke();
//....
}else{
alert("当前浏览器存在兼容性问题")
}
}
</script>
</body>
</html>
