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

HTML5 移动开发 -- Canvas 绘图 9.1 矩形，填充三角形

2013-06-17 10:41 465 查看

渐变

<!DOCTYPE html>

<html>

<head><meta charset='utf-8'></head>

<body>



<canvas id='a_canvas' width='300' height='300'></canvas>

<script type="text/javascript">

// 2.获取canvas duix

var canvas = document.getElementById('a_canvas');

// 3.由canvas获取绘图的上下文

var ctx =canvas.getContext('2d');

// 4.使用属性绘图

ctx.fillStyle = 'rgb(255,0,0)';

ctx.fillRect(50,50,200,200);

ctx.fillStyle = 'rgba(0,0,255,0.5)';

ctx.fillRect(100,100,200,200);

</script>

</body>

</html>

填充三角形

<!DOCTYPE html>

<html>

<head><meta charset='utf-8'></head>

<body>



<canvas id='a_canvas' width='300' height='300'></canvas>

<script type="text/javascript">

// 2.获取canvas duix

var canvas = document.getElementById('a_canvas');

// 3.由canvas获取绘图的上下文

var ctx =canvas.getContext('2d');

// 4.使用属性绘图

//开始绘制

ctx.beginPath();

// 绘图的基点

ctx.moveTo(0,0);

//绘制从前一次到这个点的直线

ctx.lineTo(0,290);

ctx.lineTo(290,290);

//结束绘制

ctx.closePath();

// 进行绘图处理

ctx.fillStyle = 'rgba(200,0,0,0.5)';

// 填充路径

ctx.fill();

</script>

</body>

</html>

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

标签：

相关文章推荐

新的分享

章节导航