canvas入门

最新推荐文章于 2023-06-09 11:35:33 发布

zbailing

最新推荐文章于 2023-06-09 11:35:33 发布

阅读量134

点赞数

分类专栏： Canvas

本文链接：https://blog.csdn.net/zbailing/article/details/98852427

版权

Canvas 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

css

        * {
            box-sizing: border-box;
        }
        html,body {
            width: 100%; height: 100%;
        }
        body {
            margin: 0;
            padding: 15px;
        }
        #myCanvas {
            border: 1px solid #ddd;
        }

html

<canvas id="myCanvas" width="400" height="400">您的浏览器不支持canvas</canvas>

canvas只能用 width 和 height 属性设置宽度。如果将宽高设置到css里，会导致绘制的图形模糊变形。

var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d'); //获取用于在画布上绘图的环境。

绘制矩形

ctx.fillStyle='red';
ctx.fillRect(0,0,300,150); // 绘制矩形。
//ctx.fillRect(10,130,100,100);
ctx.clearRect(20,20,50,50); // 绘制清空矩形。clearRect(矩形左上角x坐标，矩形左上角y坐标，矩形宽度，矩形高度)。

绘制线段

ctx.beginPath(); // 开始一条路径或重置当前路径
ctx.moveTo(0,50); // 起点
ctx.lineTo(150,50); // 终点
ctx.lineWidth = 5;
ctx.strokeStyle = 'red';
ctx.stroke(); //进行绘制

绘制圆弧

ctx.beginPath();
ctx.arc(100,100,50,0,2*Math.PI); //创建弧或曲线（创建圆或部分圆）。ctx.arc(圆心横坐标，圆心纵坐标，半径，起始角，结束角);
ctx.strokeStyle='red';
ctx.stroke();

绘制三角形

ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,70);
ctx.lineTo(150,70);
ctx.closePath(); // 闭合路径
ctx.strokeStyle='red'; // 边框颜色（对于颜色样式的设置，必须放在绘制之前才能生效）
ctx.stroke(); //绘制边框
ctx.fillStyle='green'; // 填充颜色
ctx.fill(); //绘制填充

绘制实心圆

ctx.beginPath();
ctx.arc(100,100,50,0,2*Math.PI,false); //false：可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
ctx.fillStyle= 'red',
ctx.fill();

绘制圆头线段

    ctx.beginPath();
    ctx.moveTo(50,50);
    ctx.lineTo(200,50);
    ctx.lineWidth = 10;
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(50,80);
    ctx.lineTo(200,80);
    ctx.lineWidth = 10; // 设置线宽
    ctx.lineCap = 'round'; // 设置线条末端线帽样式
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(50,110);
    ctx.lineTo(200,110);
    ctx.lineWidth = 10;
    ctx.lineCap = 'square';
    ctx.stroke();

绘制半圆弧

ctx.beginPath();
ctx.arc(200,200,100,0,2*Math.PI,false);
ctx.fillStyle = '#ddd';
ctx.fill();
ctx.beginPath();
ctx.arc(200,200,95, -0.5*Math.PI, 2*Math.PI*0.5-0.5*Math.PI, false); // 起始角和结束角各减4分之一圆，使起始位置挪到圆环顶端。
ctx.strokeStyle= 'red';
ctx.lineWidth = 10;
ctx.stroke();

绘制文字

ctx.font='14px Microsoft YaHei'; // 设置字体属性。设置字体后，字体大小才能生效。
ctx.fillText('32/122',200,200); // ctx.fillText(输出文本，文本的x坐标，文本的y坐标)，这三个参数都是必填。

ctx.font='italic bold 32px Microsoft YaHei'; // 各个属性按顺序才能生效。
ctx.fillText('使用率',200,250);

绘制渐变文字

ctx.font = '16px Arial';
ctx.fillText('hello,world!', 10, 50);

ctx.font = '30px Arial';

//var grd = ctx.createLinearGradient(0, 0, 170, 0); // 创建线性渐变。createLinearGradient(渐变开始点x坐标，渐变开始点y坐标，渐变结束点x坐标，渐变结束点y坐标)。
var grd = ctx.createLinearGradient(70, 70, 70, 90);
grd.addColorStop(0, 'black'); // addColorStop(在gradient对象中何处定位颜色，颜色)。
grd.addColorStop(0.5, 'red');
grd.addColorStop(1, 'white');
ctx.fillStyle = grd;

//ctx.fillStyle = 'red'; // 字体颜色（必须放在fillText()之前）
ctx.fillText('openstackPlat', 10, 90); // 绘制填色的文本

绘制渐变文字

    ctx.font = '24px Microsoft YaHei';
    ctx.textAlign = 'center'; // 文本对齐方式
    ctx.textBaseline = 'middle'; // 文本基线对齐方式
    var grd = ctx.createLinearGradient(150, 0, c.width-150, 0);
    grd.addColorStop(0, 'magenta');
    grd.addColorStop(0.5, 'blue');
    grd.addColorStop(1, 'red');
    ctx.fillStyle = grd;
    ctx.fillText('云资源管理', c.width/2, c.height/2);

canvas文本对齐

    ctx.moveTo(c.width/2, 30);
    ctx.lineTo(c.width/2, c.height-30);
    ctx.strokeStyle = 'red';
    ctx.stroke();

    ctx.font = '15px Arial';

    ctx.textAlign = 'start'; // 默认，文本在指定坐标开始。
    ctx.fillText('云资源管理', c.width/2, 50);

    ctx.textAlign = 'end'; // 文本在指定坐标结束。
    ctx.fillText('云资源管理', c.width/2, 80);

    ctx.textAlign = 'center'; // 文本中心被放置在指定坐标。
    ctx.fillText('云资源管理', c.width/2, 110);

    ctx.textAlign = 'left'; // 文本相对于坐标左对齐。
    ctx.fillText('云资源管理', c.width/2, 140);

    ctx.textAlign = 'right'; // 文本相对于坐标右对齐。
    ctx.fillText('云资源管理', c.width/2, 170);

绘制空心字

    ctx.font = 'bold 50px Arial';
    ctx.textAlign = 'center';
    ctx.strokeText('OpenStack', c.width/2, c.height/2); // strokeText()能绘制空心字

绘制文字2

ctx.font = '14px Microsoft YaHei';
ctx.textAlign = 'start';
ctx.fillText('/233', c.width/2, c.height/2);
ctx.font = '24px Arial';
ctx.textAlign = 'end';
ctx.fillText('20', c.width/2, c.height/2);

canvas文本基线对齐（垂直对齐）

ctx.moveTo(10, c.height/2);
ctx.lineTo(c.width-10, c.height/2);
ctx.strokeStyle = 'red';
ctx.stroke();

ctx.font = '15px Microsoft YaHei';
ctx.textBaseline = 'alphabetic' //设置当前文本基线。文本基线会和坐标对齐。文本基线默认，文本基线是普通的字母基线。
ctx.fillText('云资源', 10, c.height/2);

ctx.font = '15px Microsoft YaHei';
ctx.textBaseline = 'top'; // 文本基线在文字顶端。
ctx.fillText('云资源', 60, c.height/2);

ctx.font = '15px Microsoft YaHei';
ctx.textBaseline = 'hanging'; // 文本基线是悬挂基线。
ctx.fillText('云资源', 110, c.height/2);

ctx.font = '15px Microsoft YaHei';
ctx.textBaseline = 'middle'; // 文本基线在文字正中。
ctx.fillText('云资源', 160, c.height/2);

ctx.font = '15px Microsoft YaHei';
ctx.textBaseline = 'middle'; // 文本基线在文字正中。
ctx.fillText('云资源', 210, c.height/2);

ctx.font = '15px Microsoft YaHei';
ctx.textBaseline = 'ideographic'; // 文本基线是表意基线。
ctx.fillText('云资源', 260, c.height/2);

ctx.font = '15px Microsoft YaHei';
ctx.textBaseline = 'bottom'; // 文本基线在文字底端。
ctx.fillText('云资源', 310, c.height/2);

zbailing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas入门

目录csshtml绘制矩形绘制线段绘制圆弧绘制三角形绘制实心圆绘制圆头线段绘制半圆弧绘制文字绘制渐变文字绘制渐变文字canvas文本对齐绘制空心字绘制文字2canvas文本基线对齐（垂直对齐）css * { box-sizing: border-box; ...
复制链接

扫一扫