1.利用 canvas 写一个 牛 字：
<!-- 宽高必须写在元素本身 canvas id="canvasId" width="600px" height="400px" -->
<canvas id="canvasId" width="600px" height="400px" style="border: 1px solid red;"></canvas>
<button id="btn">清除</button>
<script>
/* 获取canvas元素 */
let cavsDOM = document.getElementById('canvasId');
let btn = document.getElementById('btn')
/* 创建canvas对象 */
let cavs = cavsDOM.getContext('2d');
/* 绘制一条直线 */
/* 设置开始点 */
/* 距离左边100,距离顶部100的起始点 */
cavs.moveTo(100,100);
/* 距离左边300,距离顶部100的起始点 */
cavs.lineTo(300,100)
/* 起始点 */
cavs.lineTo(200,100)
/* 终点 */
cavs.lineTo(200,350)
cavs.moveTo(200,10);
cavs.lineTo(200,550)
cavs.moveTo(130,50);
cavs.lineTo(40,250)
cavs.moveTo(70,200);
cavs.lineTo(330,200)
/* 设置线条的颜色值 */
cavs.strokeStyle = 'pink';
/* 设置线条的粗细 */
cavs.lineWidth = "10"
/* 把起始点和终点连起来 */
cavs.stroke()
效果：
2.利用canvas写一个画板，添加清除键：
在之前的基础上加上
let move = false;
cavsDOM.onmousedown = function(e){
let event = e||window.event
/* 兼容写法 */
let x = event.offsetX;
let y = event.offsetY;
cavs.moveTo(x,y);
move = true
}
cavsDOM.onmousemove = function(e){
let event = e||window.event
/* 兼容写法 */
let x = event.offsetX;
let y = event.offsetY;
if(move){
cavs.lineTo(x,y);
cavs.stroke();
}
cavsDOM.onmouseup = function(e){
move=false
}
btn.onclick = function(){
cavs.beginPath()
cavs.clearRect(0,0,cavsDOM.width,cavsDOM.height)
}
}
效果图：
按清除键清除：
3. 创建和关闭路径：
<body>
<!-- 创建和关闭路径 -->
<canvas class="cav" width="600px" height="400px" style="border: 1px solid red;"></canvas>
<script>
let cavDOM = document.getElementsByClassName('cav')[0];
let cav = cavDOM.getContext('2d');
/* 如果需要闭合路径 开始新的起点路径时 都需要创建和关闭路径 */
//开始创建路径
//cav.beginPath()
//关闭路径
//cav.closePath()
//纯使用线来画三角形 最上面终点箭头有瑕疵
/* cav.moveTo(200,100); 起始点
cav.lineTo(100,250); 起始点到第二个点
cav.lineTo(350,250) 第二个点到第三个点
cav.lineTo(200,100);*/ // 第三个个点到第一个点
//开始绘制
cav.beginPath()
cav.moveTo(200,100); //第一个点的位置
cav.lineTo(60,250); //第二个点的位置
cav.lineTo(350,250) //第三个点的位置
//结束绘制
cav.closePath()
cav.fillStyle='pink'
cav.fill();
cav.strokeStyle = 'red';
cav.lineWidth = '8'
cav.stroke()
</script>
</body>
效果图：
4.制作矩形：
<body>
<canvas width="600px" height="400px" style="border: 1px solid red;"></canvas>
<script>
let cavDOM = document.getElementsByTagName('canvas')[0];
let cav = cavDOM.getContext('2d');
/* cav.beginPath();
cav.rect(100,100,300,200)
cav.closePath()
cav.fill()
cav.stroke() */
cav.fillStyle='green'
cav.fillRect(100,100,300,200)
/* 要先设置颜色再去填充 */
/* cav.fillStyle='red'
cav.fillRect(100,100,300,200) */
/* 设置填充颜色不然默认为黑色 */
/* cav.strokeRect(x,y,width,height) 绘制矩形边框 */
cav.strokeStyle = 'red';
cav.lineWidth = 8
/* 大小不要用像素来计算 */
cav.strokeRect(100,100,300,200)
/* 清除矩形区域 */
cav.clearRect(120,120,100,100)
</script>
</body>
效果图：
