canva基础学习（一）

来源：互联网发布：可以测三庭五眼的软件编辑：程序博客网时间：2024/05/23 01:21

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><canvas id="canvas" style="border: 1px solid #aaa;display: block;margin: 50px auto;">你当前的浏览器不支持canvas，请更换浏览器再试。</canvas><script>window.onload = function(){var canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;var context = canvas.getContext("2d");context.lineWidth = 50;context.strokeStyle = "#005588";context.beginPath();context.moveTo(100,200);context.lineTo(700,200);context.lineCap = "butt";context.stroke();context.beginPath();context.moveTo(100,400);context.lineTo(700,400);context.lineCap = "square";context.stroke();context.beginPath();context.moveTo(100,600);context.lineTo(700,600);context.lineCap = "round";context.stroke();context.lineWidth = 1;context.strokeStyle ="#27a";context.moveTo(100,100);context.lineTo(100,700);context.moveTo(700,100);context.lineTo(700,700);context.stroke();}</script></body></html>

运行结果如下：

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><body><canvas id="canvas" style="border: 1px solid #aaa;display: block;margin: 50px auto;">你当前的浏览器不支持canvas，请更换浏览器再试。</canvas><script>window.onload = function(){var canvas = document.getElementById("canvas");canvas.height = 800;canvas.width = 800;var context = canvas.getContext("2d");drawRect(context, 100, 100, 400, 400, 10, "#058", "bisque");drawRect2(context, 300, 300, 400, 400, 10, "#058", "rgba(0,255,0,0.5)");}function drawRect(cxt, x, y, width, height, borderWidth, borderColor, fillColor){cxt.beginPath();cxt.rect(x, y, width, height);cxt.closePath();cxt.lineWidth = borderWidth;cxt.fillStyle = fillColor;cxt.strokeStyle = borderColor;cxt.fill();cxt.stroke();}function drawRect2(cxt, x, y, width, height, borderWidth, borderColor, fillColor){cxt.lineWidth = borderWidth;cxt.fillStyle = fillColor;cxt.strokeStyle = borderColor;cxt.beginPath();cxt.fillRect(x, y, width, height);cxt.beginPath();cxt.strokeRect(x, y, width, height);}</script></body></html>

运行结果如下：

<span style="font-size:10px;"><!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><canvas id="canvas" style="border: 1px solid #aaa;display: block;margin: 50px auto;">你当前的浏览器不支持canvas，请更换浏览器再试。</canvas><script>window.onload = function(){var canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;var context = canvas.getContext("2d");context.lineWidth = 50;context.strokeStyle = "#005588";context.beginPath();context.moveTo(100,200);context.lineTo(700,200);context.lineCap = "butt";//这是正常的context.stroke();context.beginPath();context.moveTo(100,400);context.lineTo(700,400);context.lineCap = "square";//线条两端是长方形的context.stroke();context.beginPath();context.moveTo(100,600);context.lineTo(700,600);context.lineCap = "round";<span style="font-family:Arial, Helvetica, sans-serif;">//线条两端是圆弧形的</span></span><span style="font-size:10px;">context.stroke();context.lineWidth = 1;context.strokeStyle ="#27a";context.moveTo(100,100);context.lineTo(100,700);context.moveTo(700,100);context.lineTo(700,700);context.stroke();}</script></body></html></span><span style="font-size:18px;"></span>

运行结果如下：

下面的这种方式画矩形更加简单：

以下例子里定义了一个函数drawStar，里面的参数都是可以随意改变的，从而会得到各种各样的图形，还有一个参数rot是用来旋转的，定义图形选装的角度：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><canvas id="canvas" style="border: 1px solid #aaa;display: block;margin: 50px auto;">你当前的浏览器不支持canvas，请更换浏览器再试。</canvas><script>window.onload = function(){var canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;var context = canvas.getContext("2d");context.lineWidth = 10;context.strokeStyle = "gold";drawStar(context, 150,300,400,400,-40);}function drawStar(cxt, r, R, x, y, rot){cxt.beginPath();for(var i = 0; i < 5; i ++){cxt.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+x,   -Math.sin((18+i*72-rot)/180*Math.PI)*R+y);cxt.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+x,   -Math.sin((54+i*72-rot)/180*Math.PI)*r+y)}cxt.closePath();cxt.stroke();}</script></body></html>

运行结果如下：

0 0