HTML5canvas双缓冲_测试

最新推荐文章于 2023-10-25 17:52:26 发布
最新推荐文章于 2023-10-25 17:52:26 发布
阅读量313 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/h5skill/p/5876456.html
版权

1、HTML5 canvas drawImage() 方法

http://www.w3school.com.cn/tags/canvas_drawimage.asp

　　1.1、HTML 5 canvas strokeStyle 属性

　　　　http://www.w3school.com.cn/tags/canvas_strokestyle.asp

2、测试代码：

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">

<script type="text/javascript" >

    // ZC: 缓冲画布
    var g_canvasBuffer = null;
    var g_canvasBufferContext = null;
    var g_iWidth = 800;
    var g_iHeight= 600;

    window.onload = function()
    {
    // *** *** ***
        // ZC: 网页上的<canvas/>控件
        var canvas = document.getElementById("idCanvas");
        var canvasContext = canvas.getContext("2d");
        canvas.Width = g_iWidth;
        canvas.Height= g_iHeight;

    // *** *** ***
        // ZC: 缓冲画布的一些操作
        g_canvasBuffer = document.createElement("canvas");
        g_canvasBufferContext = g_canvasBuffer.getContext("2d");
        g_canvasBuffer.width = g_iWidth;
        g_canvasBuffer.height= g_iHeight;

        if (! g_canvasBuffer)
            console.error("g_canvasBuffer == null");
        if (! g_canvasBufferContext)
            console.error("g_canvasBufferContext = null");

        g_canvasBufferContext.beginPath() //清空子路径

        g_canvasBufferContext.strokeStyle = "blue";
        g_canvasBufferContext.moveTo(0, 0);
        g_canvasBufferContext.lineTo(20, 10);
        g_canvasBufferContext.lineTo(40, 100);
        g_canvasBufferContext.lineTo(600, 300);
        g_canvasBufferContext.lineTo(500, 400);
        g_canvasBufferContext.lineTo(700, 500);//*/
        g_canvasBufferContext.stroke();

        g_canvasBufferContext.closePath() //闭合路径

    // *** *** ***
        // ZC: 从缓冲画布 往 网页画布<canvas/> 上画
        canvasContext.drawImage(g_canvasBuffer, 0, 0, g_iWidth, g_iHeight, 0, 0, g_iWidth, g_iHeight);
    };

</script>

</head>

<body>

<!-- ZC: canvas节点的width&height属性，设置在style里面的话，在chrome(版本 51.0.2704.63 m)中效果不对 -->
<canvas id="idCanvas" width="800" height="500" style="border: 1px solid red;">
    Canvas not supported.
</canvas>

</body>
</html>

　　2.1、效果图

 

3、

4、

5、

 

转载于:https://www.cnblogs.com/h5skill/p/5876456.html

weixin_30252155
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5_Canvas_Cheat_Sheet.zip
07-02
这个“HTML5_Canvas_Cheat_Sheet.zip”压缩包显然包含了关于Canvas API的速查表和可能的示例资源，旨在帮助开发者快速理解和应用Canvas。 Canvas API是HTML5的一个核心特性，它通过JavaScript提供了直接在浏览器上...
HTML5 canvas双缓存实例
wwyao
07-29 7448
转自：http://www.108js.com/article/article3/30046.html?id=255   下面是用HTML5的标签写的一个视差滚动动画的示例。采用了制作动画或者游戏编程中常用的双缓冲技术：获取到页面中的Canvas对象之后，创建了一个与页面Canvas同样大小的Canvas对象。绘图时先将图像绘制到缓冲Canvas中，等到每一桢的图像绘制完全后在把整个缓冲C
Canvas的缓冲区
最新发布
qq_21476953的博客
10-25 286
在传统的 canvas 绘图中，绘制操作是即时执行的，意味着一旦调用绘图 API 绘制图形，绘制指令就会立即发送到绘图设备进行处理，然后绘制缓冲区的内容会被复制到显示缓冲区并进行显示。canvas的绘制缓冲区和显示缓冲区理解为两个容器，它们用于存储绘制结果。绘制缓冲区是用于存储渲染管线生成的像素数据，而显示缓冲区是绘制缓冲区最终的存储位置。，绘制缓冲区的内容一般会被复制到显示缓冲区中，并在屏幕上进行显示。，是指所有的绘制指令已经被发送到绘图设备（如 GPU）进行处理，并且绘制缓冲区中的图像已经被更新。
HTML5_canvas_图片加载_双缓冲_跳帧闪烁问题
aof26372的博客
11-21 2359
canvas 图片加载 pen.drawImage(ele, showX, showY, imgWidth, imgHeight); ele 将 img 元素 加载到画布上 步骤 1. 创建一个 <img> 对象 var imgNode = new Image(); imgNode.src = "./img/bird.png";...
[cache和buffer的区别]canvas的缓冲绘图
Win32FanEx 的专栏
08-23 891
canvas的缓冲绘图涉及到两个概念，一是“双缓冲”，二是"预渲染"。 双缓冲历史已久。记得当年学习windows编程时就用到了双缓冲技术，先在内存中开辟一块画布，在上面执行完绘制操作后，把该内存画布作为一幅图片整体投射到屏幕上。这样可以避免显示器闪烁。 而预渲染则是把图画中常用到的一些背景部分预先画到一个buffer上，当动画中需要显示该部分时，直接从buffer上拷过来用就行了。 "双缓冲"和"预渲染"是两个不同的技术。需要注意的是：在html5 canvas编程中，已不需要双缓冲了。因为浏览器已
HTML5-canvas绘图黑屏白屏解决方案（详解双缓冲绘图机制）
热门推荐
大菜鸟的博客
01-12 1万+
HTML5-canvas绘图黑屏白屏解决方案（详解双缓冲绘图机制） 使用canvas绘图的前端工程师可能都会遇到过canvas绘图黑屏、白屏的问题。以前写过一篇文章描述过hybrid下canvas黑屏的一种可能性： http://blog.csdn.net/yuhk231/article/details/53560782 那么如果我们面对的场景就是移动端各大浏览器呢？当出现黑屏、白屏的时候就...
pibg-15s_html5canvas_图片_
10-02
本项目"pibg-15s_html5canvas_图片_"正是利用HTML5 Canvas技术来处理图片背景，实现了一种模糊化处理的效果，并且这个效果会在15秒后自动关闭，这在网页设计和用户体验上都有一定的创新性。 首先，我们来看HTML5 ...
canvas_html5canvas_
10-03
"canvas_html5canvas_"这个标题暗示了我们将深入探讨如何利用HTML5的Canvas API来实现拍照功能。在现代网页应用中，这种功能非常常见，比如用于头像上传、截图分享等场景。 首先，Canvas是一个基于矢量图形的画布，...
俄罗斯方块_html5canvas_javascript_topic492_
10-01
"俄罗斯方块_html5canvas_javascript_topic492_" 这个标题表明我们正在讨论一个使用HTML5 Canvas和JavaScript编程语言实现的俄罗斯方块游戏项目。HTML5 Canvas是HTML5的一个重要特性，它允许开发者在网页上进行图形...
Painter_Report_html5canvas_echarts_css_
09-30
【Painter_Report】是一个基于HTML5 Canvas、ECharts和CSS技术构建的绘画报告工具。这个工具旨在提供一个交互式的画板，用户可以利用Canvas的原生API进行自由绘画，包括绘制线条并调整线条的粗细，同时它还具备统计...
HTML5 canvas自适应手机屏幕大小的一种解决方案
狡猾的皮球的博客
01-23 4137
一、最终效果 为了不浪费大家时间，先展示最终效果，看看是不是大家需要的解决方案： 完整项目地址：https://github.com/zxf20180725/canvas_auto-adapted 标准分辨率： 其他分辨率的适配情况： 二、需求 1.canvas的内容能全部展示在屏幕上 2.尽量能保证图像不变形 3.绘制的文字也能自适应 三、解决方案 1.我们需要指定一...
html5画布刷新,HTML5的canvas绘制动态时钟，1秒刷新一次canvas,个人觉得有性能的问题，如果不这么做的话，有什么好的方法？...
weixin_32391045的博客
06-30 770
回复内容：个人觉得没有性能的问题不会有任何性能问题，要理解canvas是比较底层的API，它需要手工去做一些底层的工作，让canvas里的东西动起来就需要不停的重绘，刚接触canvas的人会容易产生这样的误解，觉得这样会有性能问题传统的DOM动画并不是没有这个重绘过程的，想要DOM元素动起来，一样需要经历重排版和重渲染，只不过这些浏览器的排版引擎在底层已经自动替你完成了，实际上浏览器重构整个渲染树...
HTML5 Canvas 视差滚动动画
web开发自学
10-16 455
下面是用HTML5的&lt;canvas&gt;标签写的一个视差滚动动画的示例。采用了制作动画或者游戏编程中常用的双缓冲技术：获取到页面中的Canvas对象之后，创建了一个与页面Canvas同样大小的Canvas对象。绘图时先将图像绘制到缓冲Canvas中，等到每一桢的图像绘制完全后在把整个缓冲Canvas绘制到页面Canvas中。前景、中景、远景的视差通过控制移动速度来实现。整个动画的绘制部分只...
HTML5 canvas 响应,用HTML5把Canvas缓冲区内容输出到屏幕
weixin_42506647的博客
06-16 206
【IT168技术】欢迎来到我的HTML5游戏编程小教程。我会尽量简要说明如何使用HTML5 canvas元素和JavaScript创建简单的游戏。本教程将省略一些代码，但绝非故意。您可以随时查看我的游戏演示。HTML5有许多的神奇功能，诸如:画布元素视频和音频的支持本地存储离线Web应用程序地理定位…这篇文章不打算覆盖所有的HTML5规范，有关HTML5的更多信息，请参考HTML5:http://...
canvas绘图总结——双缓冲绘图、拖动、缩放的实现
JuicyActiveGilbert的博客
05-11 3773
双缓冲 web中canvas绘图并未自带双缓冲绘图机制。为了使绘图更加流畅以及不出现闪屏的情况，思考使用双缓冲绘图来解决该问题。解决该问题最大的突破点在于canvas支持在canvas上绘制另一个canvas。实现方式如下： var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'...
Canvas 与 双缓冲 相关文章
Rand Tsui
07-27 1861
作者：严天宇 链接：http://www.zhihu.com/question/25036663/answer/29881637 来源：知乎 著作权归作者所有，转载请联系作者获得授权。 对于CANVAS绘制性能提高问题，可以考虑使用“双缓冲”技巧。 CANVAS图像传统绘制是这个样子的： （1）在可见画布上画出一个圆。 （2）在可见画布上画出一个三角。 （3）在可见画布上画出一
解决双缓存仍然闪烁的问题
ryanbanks的专栏
08-03 1173
MFC中，使用双缓存仍然闪烁。 窗口在擦除背景时，会造成闪烁，即便使用双缓存。 因此，频繁重绘时 一、Invalidate（）函数，参数应为false，传true则会擦除背景。 二、窗口响应WM_ERASEBKGND消息，返回 NULL，而不是默认的CDialog::OnEraseBkgnd(pDC);也可解决此问题
谈谈canvas的性能优化，主要讲缓存问题
05-05 1201
canvas玩多了后，就会自动的要开始考虑性能问题了。怎么优化canvas的动画呢？
使用双缓存解决 Canvas clearRect 引起的闪屏问题
冰雪为融的博客
12-08 1895
前言 今天用 canvas 做 H5 的时候遇到了闪屏问题。闪烁效果如下图： 问题简介 功能简介 H5 该部分的功能为：通过点击二级菜单，切换图片的遮罩或者更换背景。 因为功能简单，所以用了原生 canvas 实现这个功能。但在使用 clearRect 清除画布的时候会出现闪烁的情况。 代码实现（问题代码） 以下代码即为出现闪屏的关键代码，省略了图片的定义与 onload： // 点击二级菜单后，触发该函数更新画布 updateCanvas(){ const ...
HTML5 Canvas 2D API 规范解读
"HTML5学习文档，包括HTML5 Canvas 2D API规范1.0的中文版，允许复制和修改内容。文档由CodeEx.CN翻译，并提供了丰富的图形绘制功能的详细说明，如状态管理、转换、合成、颜色风格、线条、阴影、形状、文字、图像...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值