您的位置：首页 > 其它

学习Canvas绘图与动画基础为多边形着色（三）

2015-12-17 18:34 399 查看

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>多边形着色</title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #aaa; display:block;margin:30px auto;">
当前浏览器不支持Canvas,请更换浏览器
</canvas>
<script>
var canvas=document.getElementById('canvas');
canvas.width=1024;
canvas.height=768;//也可以在这里设置width和height
var context=canvas.getContext('2d');
//使用context进行绘制

context.moveTo(100,100);
context.lineTo(700,700);
context.lineTo(100,700);
context.lineTo(100,100);
context.fillStyle="rgb(2,100,30)";
context.fill();

context.lineWidth=5;
context.strokeStyle="red";
context.stroke();
</script>
<!--
1.context.fillStyle="rgb(2,100,30)";和context.fill();//给多边形填充颜色
2.context.lineWidth=5;
context.strokeStyle="red";
context.stroke();
//为外边框着色
-->
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航

学习Canvas绘图与动画基础 为多边形着色（三）

学习Canvas绘图与动画基础为多边形着色（三）