5. Canvas【画布】

5. Canvas【画布】

1.设置绘画区域

<canvas id="myCanvas" width="200" height="200" style="border:1px solid red"></canvas>

window.onload = function () {
  let canvas = document.getElementById("myCanvas");
  let ctx = canvas.getContext("2d");
}

2.线条设置

ctx.beginPath(); //开始路径
ctx.strokeStyle = 'black';	//边框颜色,默认黑
ctx.lineWidth = 10;		 //边框宽度，内外各一半扩大 
/* 绘画区域 */
ctx.stroke()	//线条
ctx.closePath(); //结束路径

3.填充设置

ctx.beginPath(); //开始路径
ctx.fillStyle = 'black';//填充的颜色,默认黑
/* 绘画区域 */
ctx.fill() 		//填充
ctx.closePath(); //结束路径

4.画矩形

ctx.fillRect(x,y,width,height);	//填充矩形	
ctx.strokeRect(x,y,width,height); //画矩形框
ctx.clearRect(x,y,width,height); //清除矩形,擦除橡皮工具

5.圆弧

//圆心x位置，圆心y位置，半径，起始位置，结束位置，顺逆时针
ctx.arc(x, y, 100, Math.PI*3/2,0, flase);

flase 	//顺时针
true 	//逆时针
0 = 0°  		//右侧
Math.PI/2 = 90°	//下侧
Math.PI = 180°	//左侧
Math.PI*3/2 = 270°	//上侧
Math.PI*2 = 360°

6.线段

ctx.moveTo(x,y);  //起始位置
ctx.lineTo(x,y);  //目标位置

7.文本

ctx.font="30px Arial";	              //定义字体
ctx.strokeStyle="#ccc";				  //字体颜色
ctx.strokeText("Hello World",12,52);  //空心文本
ctx.fillText("Hello World",10,50);	  //实心文本

8.插入图片

<canvas id="mycanvas" width="500" height="500" ></canvas>
<img src="./eg_tulip.jpg" alt="图片" style="display:none;" id="img1">

<script>
    var canvas = document.getElementById('mycanvas'); //获得元素
    var ctx = canvas.getctx('2d');
    var img = document.getElementById("img1");//获取图片
    img.onload = function(){	//加载需要时间，用onload
        ctx.drawImage(img,10,10);
    }           
</script>

9.旋转和缩放

ctx.rotate(Math.PI/4);  //顺时针旋转45度
ctx.scale(50%, 50%);	//缩放

10.环形圆

<canvas id="myCanvas" width="200" height="200" style="border:1px solid red"></canvas>

window.onload = function () {
  let canvas = document.getElementById("myCanvas");
  let ctx = canvas.getContext("2d");
  ctx.strokeStyle = 'yellow'
  ctx.lineWidth = 10
  ctx.arc(100, 100, 80, 0, Math.PI*2, false)
  ctx.stroke()
}