canvas直线学习
1.如何在HTML5中添加canvas元素
canvas元素的属性
<canvas id="" width="" height=""></canvas>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas0213</title>
<style type="text/css">
canvas{background:#A9A9A0}
</style>
</head>
<body>
<canvas id="mycanvas" width="500" height="300">
您的浏览器暂不支持HTML5的canvas元素
</canvas>
</body>
</html>
2.了解canvas坐标系
3.了解script元素
4.绘制一条直线
指定线宽： lineWidth=数值
指定颜色：strokeStyle=颜色值（只适用用轮廓，线段等 填充色用：fillStyle=颜色值）
canvas的路径方法
设定起点：moveTo(x坐标，y坐标）
设定终点：lineTo(x坐标，y坐标)
开始绘制:stroke（）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas0213</title>
<style type="text/css">
canvas{background:#A9A9A0}
</style>
</head>
<body>
<canvas id="mycanvas" width="500" height="300">
您的浏览器暂不支持HTML5的canvas元素
</canvas>
<script type="text/javascript">
var canvas=document.getElementById('mycanvas');//定义变量获取画布DOM
var context=canvas.getContext('2d');//设置绘图环境为2d
context.moveTo(0,0);
context.lineTo(500,300);
context.lineTo(0,300);
context.lineTo(500,0);
context.lineTo(0,150);
context.lineTo(500,150);
context.lineTo(0,0);
context.lineTo(0,300);
context.lineTo(500,150);
context.lineTo(500,300);
context.lineTo(0,150);
context.stroke();//绘制方法
context.moveTo(0,0);
context.lineTo(500,0);
context.lineTo(500,150);
</script>
</body>
</html>
5.给直线添加样式
strokeStyle属性：设置颜色、渐变或模式
lineWidth属性：设置线宽
//添加stroke属性
context.lineWidth=5;
context.strokeStyle="#A52A2A";
6.可有多个canvas画布
var canvas=document.getElementById('mycanvas');//定义变量获取画布DOM
var context=canvas.getContext('2d');//设置绘图环境为2d
var canvas1=document.getElementById('mycanvas1');
var context1=canvas1.getContext('2d');
all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas0213</title>
<style type="text/css">
canvas{background:#A9A9A0}
</style>
</head>
<body>
<canvas id="mycanvas" width="500" height="300">
您的浏览器暂不支持HTML5的canvas元素
</canvas>
<canvas id="mycanvas1" width="500" height="300"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('mycanvas');//定义变量获取画布DOM
var context=canvas.getContext('2d');//设置绘图环境为2d
var canvas1=document.getElementById('mycanvas1');
var context1=canvas1.getContext('2d');
//添加stroke属性
context.lineWidth=5;
context.strokeStyle="#A52A2A";
//描点
context.moveTo(0,0);
context.lineTo(500,300);
context.lineTo(0,300);
context.lineTo(500,0);
context.lineTo(0,150);
context.lineTo(500,150);
context.lineTo(0,0);
context.lineTo(0,300);
context.lineTo(500,150);
context.lineTo(500,300);
context.lineTo(0,150);
context.moveTo(0,0);
context.lineTo(500,0);
context.lineTo(500,150);
context.stroke();//绘制方法
//添加stroke属性
context1.lineWidth=5;
context1.strokeStyle="#A52A2A";
//描点
context1.moveTo(0,0);
context1.lineTo(500,300);
context1.lineTo(0,300);
context1.lineTo(500,0);
context1.lineTo(0,150);
context1.lineTo(500,150);
context1.lineTo(0,0);
context1.lineTo(0,300);
context1.lineTo(500,150);
context1.lineTo(500,300);
context1.lineTo(0,150);
context1.moveTo(0,0);
context1.lineTo(500,0);
context1.lineTo(500,150);
context1.stroke();//绘制方法
</script>
</body>
</html>
