html:canvas画布绘图简单入门-1

简介: html:canvas画布绘图简单入门-1

image.png

<!-- 默认宽高:300x150 -->
<canvas id="canvas"
        width="300"
        height="150"></canvas>
<script>
    // 获取画布对象
    let canvas = document.querySelector('#canvas');
    // 获取 CanvasRenderingContext2D 上下文对象(画笔)
    let ctx = canvas.getContext('2d');
    console.log(ctx);
    // 绘制路径
    ctx.rect(50, 50, 50, 50);
    // 填充
    ctx.fillStyle = "green";
    ctx.fill();
    // 描边
    ctx.lineWidth = 20
    ctx.strokeStyle = 'red'
    ctx.stroke()
</script>

示例2:绘制图形和文本

image.png


<canvas id="canvas"></canvas>
<script>
    // 获取上下文
    let canvas = document.querySelector('#canvas');
    let ctx = canvas.getContext('2d');
    console.log(ctx);
    /* 设置线条属性 */
    ctx.lineWidth = 10; // 线条宽度
    ctx.lineCap = 'round'; // 端点样式 butt|round|square
    ctx.lineJoin = "round"; // 拐角样式  bevel|round|miter
    ctx.fillStyle = "green"; // 填充颜色
    ctx.strokeStyle = "red" //  画笔颜色
    /* 绘制三角形 */
    ctx.beginPath();
    ctx.moveTo(10, 10); // 设置起始点
    ctx.lineTo(10, 50);
    ctx.lineTo(50, 50);
    ctx.closePath() // 关闭路径,避免连笔
    ctx.stroke(); // 绘制路径
    ctx.fill(); // 填充
    /* 绘制矩形 */
    ctx.beginPath();
    ctx.moveTo(70, 10);
    ctx.lineTo(70, 50);
    ctx.lineTo(110, 50);
    ctx.lineTo(110, 10);
    ctx.closePath()
    ctx.stroke();
    ctx.fill();
    /* 绘制圆形 */
    ctx.beginPath();
    // (圆心x, 圆心y, 半径, 起始角[弧度计], 结束角[弧度计], false顺时针/true逆时针)
    ctx.arc(150, 30, 20, 0, 2 * Math.PI, false);
    ctx.closePath()
    ctx.stroke();
    ctx.fill();
    /* 绘制文本 */
    ctx.font = '40px 微软雅黑' // 字体属性
    ctx.lineWidth = 1; // 线条宽度
    ctx.shadowBlur = 20; // 阴影模糊级别
    ctx.shadowColor="black"; // 阴影颜色
    ctx.shadowOffsetX = 10; // 阴影水平距离
    ctx.shadowOffsetY = 20; // 阴影垂直距离
    ctx.fillText('Hello', 10, 100); // 绘制填充文本
    ctx.strokeText('Hello', 130, 100); // 绘制镂空文本
</script>

示例3:配合定时器实现弹幕效果

image.png


<canvas id="canvas"
            width="600"
            height="600"></canvas>
    <script>
        // 获取上下文
        let canvas = document.querySelector('#canvas');
        let ctx = canvas.getContext('2d');
        console.log(ctx);
        ctx.font = "50px 微软雅黑"
        let x = 600;
        setInterval(() => {
            // 清空画布
            ctx.clearRect(0, 0, 600, 600);
            x -= 3;
            if (x < -300) {
                x = 600;
            }
            ctx.fillText('Hello World', x, 100);
            ctx.strokeText('你好,世界', x, 200);
        }, 16)
    </script>

示例4:绘制图像

image.png


<canvas id="canvas"
            width="600"
            height="600"></canvas>
    <script>
        let canvas = document.querySelector('#canvas');
        let ctx = canvas.getContext('2d');
        // 绘制图像,注意:需要等图片载入后再绘制
        let img = new Image();
        img.onload = function () {
            ctx.drawImage(img, 0, 0)
        }
        img.src = 'https://www.runoob.com/wp-content/uploads/2013/11/img_the_scream.jpg';
    </script>

示例5:绘制视频帧


image.png

<canvas id="canvas"
            width="600"
            height="600"></canvas>
    <video id="video"
           src="https://www.runoob.com/wp-content/uploads/2013/11/mov_bbb.mp4"
           controls></video>
    <script>
        let canvas = document.querySelector('#canvas');
        let video = document.querySelector('#video');
        let ctx = canvas.getContext('2d');
        // 播放开始后,每隔16ms 绘制视频的当前帧
        let timer = null;
        video.onplay = function () {
            timer = setInterval(() => {
                ctx.drawImage(video, 0, 0)
            }, 16)
        }
        // 播放暂停和结束,清除绘制定时器
        function clearTimer() {
            clearInterval(timer);
        }
        video.onpause = clearTimer
        video.onended = clearTimer
    </script>
相关文章
|
11天前
|
移动开发 前端开发 HTML5
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画代码
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画特效代码,很有意思,一团三角形碎片跟随鼠标的移动,不冗长、不笨重,反而有一种很轻盈的感觉,非常不错
50 29
|
8天前
|
移动开发 前端开发 HTML5
Html5 Canvas绘制圆形仪表盘动画源码
Html5 Canvas绘制圆形仪表盘动画特效是一款基于HTML5 Canvas绘制的圆形百分比仪表盘动画特效。
12 1
|
1月前
|
移动开发 前端开发 Java
|
1月前
|
Web App开发 移动开发 前端开发
html5 canvas五彩碎纸屑飘落动画特效
h5 canvas飘落纸片动画是一款实现五彩纸屑飘落的背景动画特效,基于canvas绘制的空中飘落的纸屑片动画特效,适用于网页动态背景效果代码。简单使用,欢迎下载!代码适用浏览器:搜狗、360、FireFox(建议)、Chrome、Safari、Opera、傲游、世界之窗,是一款不错的的特效插件,希望大家喜欢!
46 5
|
2月前
|
前端开发
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
34 0
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
|
2月前
|
移动开发 前端开发 HTML5
HTML5 Canvas制作的粒子十秒倒计时源码
一段基于HTML5 Canvas制作的粒子爆炸,十秒数字倒计时,全屏倒计时动画效果,给人一种非常大气的视觉感
46 0
HTML5 Canvas制作的粒子十秒倒计时源码
|
2月前
|
前端开发 JavaScript
Canvas三维变化背景动画HTML源码
Canvas三维变化背景动画HTML源码
40 5
|
9天前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子

热门文章

最新文章