<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
canvas{
background: blue;
}
</style>
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="900" height="500"></canvas>
<script>
//获得画板
var canvas=document.getElementById("canvas");
//获得绘画环境
var cv=canvas.getContext('2d');
//开启路径（相当于大喊一声我要开始画了）
cv.beginPath();
//移动笔触到开始位置
cv.moveTo(100,100);
//指定要画到哪里去
cv.lineTo(600,300);
//定义拐角类型
cv.lineJoin='round';
//定义划线的粗细
cv.lineWidth='10';
//定义划线颜色
cv.strokeStyle='white';
//把线条画出来
cv.stroke();
cv.lineTo(700,150);
cv.stroke();
cv.lineTo(780,150);
cv.stroke();
</script>
</body>
</html>运行结果如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
canvas{
background: red;
}
</style>
<script type="text/javascript">
window.onload=function(){
//获得画板
// var canvas=document.getElementById("canvas");
//获得绘画环境
var cv=canvas.getContext('2d');
//指定填充颜色
cv.fillStyle="blue";
//绘制一个填充矩形
cv.fillRect(200,100,260,199);
// 绘制空心矩形
// cv.strokeRect(200,100,260,199);
// cv.lineWidth='10';
// // 指定线条颜色
// cv.strokeStyle='#F9264C';
// // 清除矩形像素
cv.clearRect(200,100,100,50);
}
</script>
<title>Document</title>
</head>
<body>
<!-- canvas负责在网页中绘制图形 -->
<!-- 图表 -->
<!-- <canvas>标签只是图形容器你必须用脚本来绘制图形 -->
<!-- API方法 -->
<canvas id="canvas" width="800" height="800"></canvas>
</body>
</html>运行结果如下:
