canvas基础用法

最新推荐文章于 2023-07-05 19:11:54 发布

两棵黄鹂鸣翠柳

最新推荐文章于 2023-07-05 19:11:54 发布

阅读量413

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/h13783313210/article/details/78909749

版权

HTML5 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

当没有设置宽度和高度的时候，canvas会初始化宽度为300像素和高度为150像素；该元素可以使用CSS来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果CSS的尺寸与初始画布的比例不一致，它会出现扭曲。故单纯的扩展画布可以写在行内

例：<canvas id="can" width="500" height="500"></canvas>

先设置颜色，后绘制图形

var ctx = canvas.getContext(‘2d’); \\创建2D渲染区域

ctx.fillStyle = “rgb(200,0,0)”; \\设置填充色

ctx.fillRect (x, y, width, height); \\绘制图形

绘制矩形

fillRect(x, y, width, height) \\绘制一个填充的矩形
strokeRect(x, y, width, height)\\绘制一个一个矩形的边框
clearRect(x, y, width, height)\\清除指定矩形区域，让清除部分完全透明

绘制路径

beginPath()新建路径

moveTo()落笔点

lineTo()结束点

stroke()用线条绘制轮廓

closePath()闭合路径

fill()填充

lineCap设置或返回线条的结束端点样式(butt;round;square)
lineJoin设置或返回两条线相交时，所创建的拐角类型(bevel-斜角；round； miter-尖角)
lineWidth设置或返回当前的线条宽度

例：

<body>
<canvas id="can" height="500" width="500">
你的浏览器不支持canvas
</canvas>

</body>
<script>
var can=document.getElementById("can");
var ctx=can.getContext("2d");
ctx.fillRect(0,0,100,100);
ctx.clearRect(25,25,50,50);

ctx.lineWidth="20"
ctx.lineCap="round";
ctx.lineJoin="bevel";
ctx.beginPath();
ctx.moveTo(200,200);
ctx.lineTo(300,300);
ctx.lineTo(300,200);

ctx.stroke();
ctx.lineTo(400,400);
ctx.stroke();
ctx.lineTo(400,100);
ctx.stroke();
</script>

绘制路径（二次贝塞尔曲线）

quadraticCurveTo(con_x,con_y,x,y);

其中con_x、con_y指控制点坐标，x、y指终点坐标

绘制路径（三次贝塞尔曲线）

bezierCurveTo(20,100,200,100,200,20)

绘制圆弧

arc(x, y, radius, startAngle, endAngle, anticlockwise)

该方法有五个参数：x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参数anticlockwise 为一个布尔值。为true时，是逆时针方向，否则顺时针方向。

注意：arc()函数中的角度单位是弧度，不是度数。角度与弧度的js表达式:radians=(Math.PI/180)*degrees。

画一个圆，例：

ctx.arc(250,250,100,0,2*Math.PI);

ctx.stroke();

绘制文字

ctx.font = "20px 微软雅黑";

ctx.fillStyle = "Black";

ctx.fillText("hello", 5, 20);

fillText()是填充字，strokeText()是线框字，另外文字参考的点是左下角而非左上角

绘制文字（对齐方式）

ctx.textBaseline="top";
ctx.fillText("Top",5,100);

基线为em方框顶端

ctx.textBaseline="bottom";
ctx.fillText("Bottom",50,100);

基线为em方框底端

ctx.textBaseline="middle";
ctx.fillText("Middle",120,100);

基线为em方框正中

ctx.textBaseline="alphabetic";
ctx.fillText("Alphabetic",190,100);

默认效果，基线为普通字母基线

ctx.textBaseline="hanging";
ctx.fillText("Hanging",290,100);

基线为字母悬挂基线

ctx.textAlign="start";
ctx.fillText("textAlign=start",150,60);
默认效果，文本在指定位置开始

ctx.textAlign="end";
ctx.fillText("textAlign=end",150,80);
文本在指定位置结束

ctx.textAlign="left";
ctx.fillText("textAlign=left",150,100);
文本左对齐

ctx.textAlign="center";
ctx.fillText("textAlign=center",150,120);
文本在中点被放在指定位置

ctx.textAlign="right";
ctx.fillText("textAlign=right",150,140);

文本右对齐

渐变 Gradients

createLinearGradient(x1, y1, x2, y2)

gradient.addColorStop(position, color)

createLinearGradient 方法接受 4 个参数，表示渐变的起点 (x1,y1) 与终点 (x2,y2)。

例：
<script>
var can=document.getElementById("can");
var ctx=can.getContext("2d");
var gra = ctx.createLinearGradient(250, 0, 250, 500);
gra.addColorStop(0, 'red');
gra.addColorStop(0.5, 'yellow');
gra.addColorStop(1, 'blue');
//填充渐变
// ctx.fillStyle=gra;
// ctx.fillRect(0, 0, 500, 500);
// 边框渐变
ctx.lineWidth="20";
ctx.strokeStyle=gra;
ctx.strokeRect(0, 0, 500, 500);
</script>

放射性渐变/圆形渐变

createRadialGradient(x1, y1, r1, x2, y2, r2)

createRadialGradient 方法接受 6 个参数，前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。

阴影 Shadows

例：

var ctx = document.getElementById('canvas').getContext('2d');

ctx.shadowOffsetX = 2;

ctx.shadowOffsetY = 2;

ctx.shadowBlur = 2;

ctx.shadowColor = "rgba(0, 0, 0, 0.5)";

ctx.font = "20px Times New Roman";

ctx.fillStyle = "Black";

ctx.fillText("Sample String", 5, 30);