canvas基本入门

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

sleepwalker_1992

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

阅读量304

点赞数

分类专栏： canvas

本文链接：https://blog.csdn.net/sleepwalker_1992/article/details/80563473

版权

canvas 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

canvas是HTML5提供的一种新标签
<canvas></canvas> 帆布画布
canvas是一个矩形区域的画布，可以用JavaScript在上面绘画。控制其每一个像素。
canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

HTML5之前的web页面只能用一些固定样式的标签：比如p、div、h1等

准备好canvas画布

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas画布</title>
</head>
<body>
<div id="container">
    <canvas id="cavsElem">
        您的浏览器不支持canvas，请升级浏览器
    </canvas>
</div>
<script>
    (function(){
        var canvas = document.getElementById('cavsElem');
        var ctx = canvas.getContext('2d');
        canvas.width = 600;
        canvas.height = 600;
        canvas.style.border = '1px solid red';
        //下面开始绘制图形
        ctx.moveTo(100,100);
        ctx.lineTo(200,100);
        ctx.stroke();
    })();
</script>
</body>
</html>

简单例子，具体分析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas入门</title>
</head>
<body>
    <!-- 设置canvas标签的宽高是通过canvas标签的属性进行设置。
    不要用css去设置 -->
    <canvas id="demo" width="600" height="600">
        IE9以上才支持canvas
        你的浏览器不支持canvas,请升级浏览器！
    </canvas>
    <script>
        //第一步，拿到canvas标签
        var canvas = document.getElementById('demo');
        canvas.style.border = '1px solid red';
        canvas.width = 1200;
        canvas.height = 1200;
        //第二步，拿到canvas的上下文
        var ctx = canvas.getContext('2d');
        //第三步，绘制
        ctx.moveTo(100,100);//画笔移到(100,100)点
        ctx.lineTo(800,100);//从画笔位置画一条直线到(200,100)点
        ctx.lineTo(100,800);//从当前位置再画一条直线到(100,200)点

        //ctx.lineTo(100,100);
        ctx.closePath();//闭合路径

        //设置线宽
        ctx.lineWidth = 20;
        //设置线颜色，表示颜色的方式：rgb(),rgba(),#888,red
        ctx.strokeStyle = 'rgba(255,0,0,.8)';
        ctx.stroke();//描表

        //设置填充样式
        ctx.fillStyle = 'green';
        //填充
        ctx.fill();
    </script>
</body>
</html>

效果：

sleepwalker_1992

关注

0
点赞
踩
1

收藏

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

canvas是HTML5提供的一种新标签<canvas></canvas> 帆布画布canvas是一个矩形区域的画布，可以用JavaScript在上面绘画。控制其每一个像素。canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。HTML5之前的web页面只能用...
复制链接

扫一扫