学习地址
https://www.runoob.com/w3cnote/html5-canvas-intro.html
一、绘制画布
<canvas
class="canvas-tutorial"
id="tutorial"
width="300"
height="300"
></canvas>
二、绘制矩形
/**
* 1、绘制矩形
*/
drawReact() {
var canvas = document.getElementById("tutorial");
//检查浏览器是否支持canvas
if (!canvas.getContext) return;
//1、渲染上下文
var ctx = canvas.getContext("2d");
console.log(ctx);
ctx.fillStyle = "rgb(200,0,0)"; //颜色
//2、绘制一个填充的矩形
ctx.fillRect(10, 10, 50, 80);
// 绘制一个矩形的边框 上 右 下 左 顺序随便t(x, y, widh, height)
// ctx.strokeRect(10,10,50,1) //绘制单边边框
// ctx.strokeRect(60,10,1,80)
// ctx.strokeRect(10,90,50,1)
// ctx.strokeRect(10,10,1,80)
ctx.strokeRect(10, 10, 50, 80); //与上面四行代码等同
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect(30, 30, 55, 55);
// 3、清除指定的矩形区域,然后这块区域会变的完全透明 clearRect(x, y, widh, height)
ctx.clearRect(30, 30, 15, 15);
},
结果如图

三、绘制线段
/**
* 2、绘制线段
*/
drawLine() {
var canvas = document.getElementById("tutorial");
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.beginPath(); //新建一条path
ctx.moveTo(50, 50); //把画笔移动到指定的坐标
ctx.lineTo(200, 50); //绘制一条从当前位置到指定坐标(200, 50)的直线.
//闭合路径。会拉一条从当前点到path起始点的直线。如果当前点与起始点重合,则什么都不做
ctx.closePath();
ctx.stroke(); //绘制路径。
},
结果如图

##绘制三角形
/**绘制三角形 */
drawsanjiaoxing(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.lineTo(200, 200);
ctx.closePath(); //虽然我们只绘制了两条线段,但是closePath会closePath,仍然是一个3角形
ctx.stroke(); //描边。stroke不会自动closePath()
//下面这行代码代替上面两行,绘制填充三角形
// ctx.fill(); //填充闭合区域。如果path没有闭合,则fill()会自动闭合路径
},

填充三角形
ctx.fill(); //填充闭合区域。如果path没有闭合,则fill()会自动闭合路径

网友评论