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

html5 javascript canvas API 画线，画对角线

2012-04-06 15:47 351 查看

<!DOCTYPE html>
<html>
<title>html5 javascript canvas API 画线，画对角线</title>
<body>
<canvas id="diagonal" style="border:1px solid;" width="200" height="200"></canvas>
<canvas id="diagonal_line" style="border:1px solid;" width="200" height="200"></canvas>
<canvas id="diagonal_x" style="border:1px solid;" width="200" height="200"></canvas>
<br>
//带实心边框的canvas元素
<script>
function drawDiagonalLine()
{
var canvas=document.getElementById('diagonal_line'); //获取canvas对象
var context=canvas.getContext('2d');    //获取canvas的上下文
context.beginPath();
context.moveTo(0,0);
context.lineTo(140,70);
context.stroke();
}
drawDiagonalLine();
//画X线
function drawX()
{
var canvas=document.getElementById('diagonal_x');
var context=canvas.getContext('2d');
context.beginPath();
//draw \
context.moveTo(0,0);
context.lineTo(200,200);
//draw /
context.moveTo(0,200);
context.lineTo(200,0);
context.stroke();
}
drawX();
//画translate重定义坐标原点
function drawTranslate()
{
var canvas=document.getElementById('diagonal_translate');
var context=canvas.getContext('2d');
context.save();
context.translate(70,140);
context.beginPath();
context.moveTo(0,0);
context.lineTo(70,-70);
context.stroke();
context.resore();
}
//drawTranslate();
window.addEventListener("load",drawTranslate,true);
</script>
<canvas id="diagonal_translate" style="border:1px solid;" width="200" height="200"></canvas>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航