canvas画布，初次使用

最新推荐文章于 2024-08-22 14:32:34 发布
最新推荐文章于 2024-08-22 14:32:34 发布
阅读量514 收藏 2
点赞数 3
分类专栏： 随手写的 文章标签： html5 javascript canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41678978/article/details/114675584
版权
这篇博客介绍了作者对canvas画布的初次尝试，通过创建两个趣味动画DEMO展示了canvas的魅力。一个是实现了一个带反弹效果的自由落体动画，另一个则是绘制了奔跑的火柴人动画，深入浅出地展示了canvas的基本用法和动画原理。
摘要由CSDN通过智能技术生成

突然对canvas画布有了兴趣写两个小动画demo，

一个是自由落体动画，带反弹的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
</head>
<style>
    .tu {
        width: 800px;
        height: 800px;
    }
</style>
<body>
<div class="tu">
    <canvas id="canvas" style="width: 100%;height: 100%;" width="900" height="900"></canvas>
</div>
</body>
<script>
    let el = document.getElementById("canvas");
    let cxt = el.getContext("2d");
    let time = 0;
    let dian = [];
    setInterval(getD, 10)
    function getD() {
        // let ct = new Date().getTime();
        time++;
        if (Math.random() * 50 < 3) {
            dian.push({
                x: Math.floor(Math.random() * 850 + 25),
                time: time,
                d: Math.floor(Math.random() * 10 + 6),
                w: 0,
                v: 0,
                fx: true,
                ft: Math.random()*0.7 + 1.2
            })
        }
        cxt.clearRect(0, 0, 900, 900)
        let nw = []
        dian.forEach(d => {
            d.v = (d.v + (d.fx ? 0.08 : -0.08));
            if (d.v < 0) {
                d.v = 0
                d.fx = true;
                // d.w =0;
            } else {
                let tw = d.v + (d.fx ? -0.04 : 0.04);
                d.w = d.w + (d.fx ? tw : -tw);
                if (d.w > (900 - d.d)) {
                    d.w = (900 - d.d);
                    d.v = d.v / d.ft
                    d.fx = false;
                }
            }
            if (d.v === 0 && d.w > (900 - d.d)-1) {
                return
            }
            nw.push(d)
        })
        cxt.fillStyle = "#ad7c7c";
        nw.forEach(d => {
            cxt.beginPath();
            // cxt.fillRect(d.x, g[time - d.time], d.d, d.d);
            cxt.arc(d.x + d.d / 2, d.w + d.d / 2, d.d / 2, 0, Math.PI * 2, true)
            cxt.closePath();
            cxt.fill()
        })
        dian = nw;
    }
</script>
</html>

另一个是奔跑的火柴人

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hcr</title>
    <style>
        .tu {
            width: 800px;
            height: 800px;
        }
    </style>
</head>
<body>
<div class="tu">
    <canvas id="canvas" style="width: 100%;height: 100%;" width="900" height="900"></canvas>
</div>
</body>
<script>
    let el = document.getElementById("canvas");
    let cxt = el.getContext("2d");
    let time = 0;
    setInterval(getD, 10)
    // getD()
    function getD() {
        cxt.clearRect(0, 0, 900, 900)
        time++;
        // let ct = new Date().getTime();
        cxt.fillStyle = "#ad7c7c";
        // cxt.beginPath();
        // cxt.arc(100,100,20, 0, Math.PI * 2, true)
        // cxt.closePath();
        // cxt.fill()
        cxt.beginPath()
        cxt.arc(300,300,30, 0, Math.PI*2 , true)
        cxt.fill()
        cxt.beginPath()
        let c = Math.sqrt(300*300 + 330*330)
        let d = Math.asin(330/c);

        let xc = Math.sqrt(286*286 + 450*450)
        let xd = Math.asin(450/xc);

        let temp = time%50;
        let jd = 0
        if (temp <=25){
            jd = temp
        }
        if (temp >25){
            jd = 50 - temp
        }
        jd = jd *3

        cxt.rotate(jd*Math.PI/180);
        let number = Math.sin(d -  jd*Math.PI/180);
        let cn = Math.cos(d - jd*Math.PI/180);
        sou(c*cn,c*number)
        jiao(xc* Math.cos(xd - jd*Math.PI/180)+14,xc* Math.sin(xd -  jd*Math.PI/180)-150)
        cxt.rotate(((360 - 2*jd)*Math.PI/180))
        sou(c* Math.cos(d + jd*Math.PI/180),c* Math.sin(d +  jd*Math.PI/180))
        jiao(xc* Math.cos(xd + jd*Math.PI/180)+14,xc* Math.sin(xd +  jd*Math.PI/180)-150)
        cxt.rotate(jd*Math.PI/180);
        // sou(3jd,3jd)
        cxt.closePath()
        shen(300,300)
        // cxt.stroke()
        cxt.fill()
    }

    function sou(x,y) {
        // cxt.beginPath();
        cxt.moveTo(x-10,y+10)
        cxt.lineTo(x+10,y+10)
        cxt.lineTo(x+10,y+80)
        cxt.lineTo(x+40,y+90)
        cxt.lineTo(x+40,y+105)
        cxt.lineTo(x-10,y+90)
        cxt.closePath()
    }

    function shen(x,y) {
        // cxt.beginPath();
        cxt.moveTo(x-14,y+20)
        cxt.lineTo(x+14,y+20)
        cxt.lineTo(x,y+150)
        cxt.lineTo(x-28,y+150)
        cxt.closePath()
    }

    function jiao(x,y) {
        // cxt.beginPath();
        cxt.moveTo(x-28,y+150)
        cxt.lineTo(x,y+150)
        cxt.lineTo(x,y+220)
        cxt.lineTo(x-30,y+270)
        cxt.lineTo(x-58,y+270)
        cxt.lineTo(x-28,y+220)
        cxt.closePath()
    }


</script>
</html>

 

qq_41678978
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
新版 2D微信小程序 canvas画布签名
qq_33476262的博客
10-28 261
【代码】新版 2D微信小程序 canvas画布签名。
Html5中的Canvas宽度为100%
热门推荐
颖火虫的夜空
09-28 1万+
有两种方法：1.JavaScript  2.CSS 1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm
html2canvas 画布,Vue + html2canvas 尝试解决绘制图片出现画布污染的问题
weixin_33218612的博客
06-17 1304
利用 html2canvas 可以很好地在将 dom "转化"为 canvas, 从而通过 canvas 再生成图片。但是，官网提到 该插件有个限制，就是 绘制图片出现画布污染的问题。本文试图解决该问题。00 实验目标利用 mathjax 生成的公式，转化为 图片。下面是实验的环境：vue webpack 项目html2canvas 截图插件vue-mathjax 数学公式插件# 创建webpac...
微信小程序之canvas画布
奋斗的老年人
02-04 2443
前言 只要干不死，就要往死干！！！
大二初次使用canvas和SVG
Fishermen_sail的博客
06-12 299
随便利用canvas和SVG画了点固定的图片，注释应该写的比较清晰。 <!DOCTYPE html> <h lang="cn"> <head> <meta charset="UTF-8"> <title>绘制</title> <style> svg { stroke: black; } </style> </head&
第10章-Canvas画布
itzyjr的专栏
07-31 664
一、绘制基本图形： HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进，以支持这一点，如video、audio和canvas标签。HTML5还引进了新的功能，可以真正改变用户与文档的交互方式。Safari4+、Chrome、FireFox、Opera以及IE9+都已支持HTML5。 1.认识Canvas HTML5的canvas元素是为了客户端矢量图形而设计的。需要注意的是...
微信小程序canvas画布图片保存到相册官方授权、自定义授权、保存
tl437002770的博客
01-15 1102
微信小程序canvas画布图片保存到相册官方授权、自定义授权、保存
canvas使用项目内图片遇到的画布污染问题
Anton的博客
08-22 2129
直接先说目前我的解决方案吧。 就是没办法解决，把canvas需要用到的所有图片都放到服务器上，并设置服务器允许跨域请求，然后把url给前端。 本人遇到这个问题是在ios上，项目是cordova的hybrid app，在H5和android上均正常，但是到了ios内就报了问题：（复现场景：canvas.getContext(‘2d’).toDataUrl() ） Security Error The...
ROI （在canvas画布上画多边形和矩形）
weixin_45578530的博客
06-08 948
应用在视频监控领域 画的形状就是重点检测范围 如下图所示： RoiContainer.vue <template> <div class="roi-container"> <div class="roi-main"> <roi ref="arcRoiRef" :roiData="roiData" @drawCallBack="drawCallBack" /> ..
html5使用canvas绘制一张图片
09-28
Canvas提供了`drawImage()`方法，用于将图像（包括图片、画布或视频）绘制到画布上。下面将详细阐述这一过程及其相关知识点。 首先，我们需要在HTML中创建一个`<canvas>`元素。这是一个具有特定`width`和`height`...
canvas-paper:同构画布层
05-09
Canvas Paper 是一个JavaScript库，专为创建同构的画布层设计。这意味着您可以在服务器端和客户端（浏览器）上使用相同的代码进行图形绘制。这样的设计极大地提升了开发效率，特别是对于那些需要在服务端预渲染或者...
canvas图片旋转自适应容器宽度实践
12-12
在上述代码中，`originalWidth`和`originalHeight`用于保存图片原始尺寸，首次旋转时它们为undefined，所以使用图片自身的width和height。之后的旋转则使用之前保存的尺寸，因为每次旋转后宽高会互换。 最后，为了...
SnakeMIDlet.rar_canvas贪吃蛇
09-24
在贪吃蛇游戏中，Canvas充当了游戏画面的画布，我们可以在上面绘制游戏元素，如蛇、食物以及游戏边界。 1. **Canvas类的初始化与绘图** 贪吃蛇游戏首先要创建一个继承自Canvas的自定义类，比如命名为SnakeCanvas。...
js HTML5 Canvas绘制转盘抽奖
10-21
这个示例不仅涉及HTML5的Canvas绘图，还结合了jQuery库和第三方插件jQueryRotate.js，展示了如何将这些技术结合使用来创建交互式Web应用。通过学习和理解这段代码，开发者可以进一步提升在JavaScript、HTML5 Canvas...
HTML5简洁的通用网站模板源码
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
08-19 731
HTML5简洁的通用网站模板源码，各行各业的网站源码，文字源码大作业网站源码，毕业设计网站源码，通用模板，网站源码，布局规整，色彩鲜明，导航菜单，轮播图（可自定义内容），图文结合，滚动信息，信息表单，描点跳转，整体风格简洁，内容丰富，各种风格都有，兼容性强，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
404炫酷单页面html5源码
爱酷码的博客
08-22 209
404炫酷单页面html5源码，感觉应该符合一些人的感觉！可以用来做404页面。记事本打开源码文件可以进行内容文字之类的修改，双击html文件可以本地运行效果，也可以上传到服务器里面，重定向这个界面。
nodejs安装
a1241436267的博客
08-19 384
版本控制nodejs版本:v17.3.1npm版本:8.3.0安装流程。
vue开发引入第三方插件的方式及其区别
最新发布
你们瞎搞
08-22 317
npm。
canvas插入一张图片
07-26
HTML5 的 `<canvas>` 元素允许我们通过脚本来绘制图形到网页上。要将一张图片插入到 `<canvas>` 中，通常需要先加载该图片，然后将其转换为适合绘图的数据格式，最后再使用 `drawImage` 方法绘制到画布上。 以下是详细步骤： 1. **加载图片**： 使用 `fetch` 或者 `XMLHttpRequest` 来异步从服务器或其他来源获取图片文件。这里使用 `fetch` 为例： ```javascript fetch('path/to/your/image.jpg') .then(response => response.blob()) .then(imageBlob => { // 创建图像元素并设置 blob 为源数据 let img = new Image(); img.src = URL.createObjectURL(imageBlob); }); ``` 2. **绘制图片**： 等待图片加载完成后，我们就可以将它绘制到 `<canvas>` 上了： ```javascript function drawImageOnCanvas(canvas) { if (window.URL && window.URL.createObjectURL) { // 图像加载完成之后，使用 createObjectURL 将 Blob 转换为可处理的 URL let img = new Image(); img.onload = () => { // 绘制图片至画布上 let ctx = canvas.getContext('2d'); ctx.drawImage(img, x, y, width, height); // 这里的坐标和大小取决于你想如何放置图片 // 清理资源 URL.revokeObjectURL(img.src); }; img.src = URL.createObjectURL(imageBlob); } else { console.error("Failed to create an object URL for the image."); } } // 找到 canvas 元素并绘制图片 let canvasElement = document.getElementById('myCanvas'); drawImageOnCanvas(canvasElement); ``` 这个示例展示了如何将图片从服务器加载并在 `<canvas>` 上绘制。注意，你需要替换 `'path/to/your/image.jpg'` 为你实际使用的图片链接，并根据需要调整 `x`, `y`, `width`, 和 `height` 参数来控制图片的位置和尺寸。 --- ### 相关问题: 1. **如何优化图片加载速度**? - 使用合适的内容类型和编码压缩图片。 - 利用懒加载策略仅在需要时加载图片。 - 预加载关键的图片资源以提高首次加载的速度。 2. **如何自适应不同屏幕大小下的图片显示**? - 根据设备的屏幕宽度自动调整图片的大小。 - 动态计算图片的缩放比例以维持最佳的清晰度和比例展示。 3. **如何处理跨域请求的问题**? - 确保服务器配置正确，允许跨域资源共享(CORS)。 - 使用 JSONP 等机制绕过同源策略限制。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值