JS – canvas
Table of Contents
<canvas id="canva" weight=".." height="..." style="border: 1px solid #f00"></canvas> var canva = document.getElementById("canva"); var cxt = canva.getContext(‘2d‘); var width = cxt.canvas.width; var height = cxt.canvas.height; var width = canva.width; var height = canva.height; cxt.lineWidth = 2; 线的宽度为 2
画线
cxt.moveTo(20, 20); cxt.lineTo(90, 90); cxt.stroke();
三角形
cxt.beginPath(); cxt.moveTo(30, 30); cxt.lineTo(0, 80); cxt.lineTo(80, 80); cxt.closePath(); cxt.fillStyle = "#f00"; cxt.fill(); // cxt.stroke();
矩阵 (左上角, 宽, 高)
cxt.fillStyle = "#f00"; cxt.fillRect(0, 0, 30, 80); // cxt.strokeRect(0, 0, 30, 80);
圆形 arc(圆心, 半径, 开始的角度, 结束的角度, 是否顺时针)
cxt.beginPath();
cxt.arc(50, 50, 30, 0, 30, false);
cxt.closePath();
cxt.stroke();
cxt.fill();
从图片中画图
var img = document.getElementById("img"); ctx.drawImage(img, X, Y, Width, Height);
新建一张图片
var img1 = new Image(); img1.src = "1.png"; var x = boom.x; var y = boom.y; img1.onload = function() { cxt.drawImage(img1, x, y, 30, 30); }
写字
var str = "你好"; cxt.fillStyle = "#f00"; cxt.font = "50px Monoca"; cxt.fillText(str, 0, 50); cxt.strokeText(str, 0, 50);
刷新
cxt.clearRect(0, 0, width, height);
