离屏Canvas

最新推荐文章于 2024-06-26 04:13:17 发布
最新推荐文章于 2024-06-26 04:13:17 发布
阅读量809 收藏
点赞数
分类专栏： html 文章标签： Canvas 离屏

离屏效果：


离屏非离屏并存效果


[javascript]  view plain  copy
  1. <!DOCTYPE html>  
  2. <!--     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  3. -->  
  4. <html>  
  5.    <head>  
  6.      <title>Image Clock</title>  
  7.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  8.       <style>   
  9.          body {  
  10.             background: #dddddd;  
  11.          }  
  12.  
  13.          #canvas {  
  14.             display: none  
  15.          }  
  16.  
  17.          #snapshotImageElement {  
  18.             position: absolute;  
  19.             left: 10px;  
  20.             margin: 20px;  
  21.             border: thin solid #aaaaaa;  
  22.          }  
  23.       </style>  
  24.    </head>  
  25.   
  26.   <body>  
  27.     <img id='snapshotImageElement'/>  
  28.     <canvas id='canvas' width='400' height='400'>  
  29.       Canvas not supported  
  30.     </canvas>  
  31.     <script>  
  32.         var canvas = document.getElementById('canvas'),  
  33.     context = canvas.getContext('2d'),  
  34.     snapshotButton = document.getElementById('snapshotButton'),  
  35.     snapshotImageElement = document.getElementById('snapshotImageElement'),  
  36.     FONT_HEIGHT = 15,  
  37.     MARGIN = 35,  
  38.     HAND_TRUNCATION = canvas.width/25,  
  39.     HOUR_HAND_TRUNCATION = canvas.width/10,  
  40.     NUMERAL_SPACING = 20,  
  41.     RADIUS = canvas.width/2 - MARGIN,  
  42.     HAND_RADIUS = RADIUS + NUMERAL_SPACING,  
  43.     loop;  
  44.   
  45.   
  46.   
  47. function drawCircle() {  
  48.    context.beginPath();  
  49.    context.arc(canvas.width/2, canvas.height/2, RADIUS, 0, Math.PI*2, true);  
  50.    context.stroke();  
  51. }  
  52.      
  53. function drawNumerals() {  
  54.    var numerals = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ],  
  55.        angle = 0,  
  56.        numeralWidth = 0;  
  57.   
  58.    numerals.forEach(function(numeral) {  
  59.       angle = Math.PI/6 * (numeral-3);  
  60.       numeralWidth = context.measureText(numeral).width;  
  61.       context.fillText(numeral,   
  62.          canvas.width/2  + Math.cos(angle)*(HAND_RADIUS) - numeralWidth/2,  
  63.          canvas.height/2 + Math.sin(angle)*(HAND_RADIUS) + FONT_HEIGHT/3);  
  64.    });  
  65. }  
  66.   
  67. function drawCenter() {  
  68.    context.beginPath();  
  69.    context.arc(canvas.width/2, canvas.height/2, 5, 0, Math.PI*2, true);  
  70.    context.fill();  
  71. }  
  72.   
  73. function drawHand(loc, isHour) {  
  74.    var angle = (Math.PI*2) * (loc/60) - Math.PI/2,  
  75.        handRadius = isHour ? RADIUS-HAND_TRUNCATION-HOUR_HAND_TRUNCATION   
  76.                            : RADIUS-HAND_TRUNCATION;  
  77.   
  78.    context.moveTo(canvas.width/2, canvas.height/2);  
  79.    context.lineTo(canvas.width/2  + Math.cos(angle)*handRadius,   
  80.                   canvas.height/2 + Math.sin(angle)*handRadius);  
  81.    context.stroke();  
  82. }  
  83.   
  84. function drawHands() {  
  85.    var date = new Date,  
  86.        hour = date.getHours();  
  87.    hour = hour > 12 ? hour - 12 : hour;  
  88.    drawHand(hour*5 + (date.getMinutes()/60)*5, true, 0.5);  
  89.    drawHand(date.getMinutes(), false, 0.5);  
  90.    drawHand(date.getSeconds(), false, 0.2);  
  91. }  
  92.   
  93. //每隔一秒抓取一次canvas快照,并更新img的src属性  
  94. function updateClockImage() {  
  95.    dataUrl = canvas.toDataURL();  
  96.    snapshotImageElement.src = dataUrl;  
  97. }  
  98.   
  99. //每秒执行一次绘制,canvas已隐藏,每秒更新一次img的src属性  
  100. function drawClock() {  
  101.    context.clearRect(0,0,canvas.width,canvas.height);  
  102.   
  103.    context.save();  
  104.   
  105.    context.fillStyle = 'rgba(255,255,255,0.8)';  
  106.    context.fillRect(0, 0, canvas.width, canvas.height);  
  107.   
  108.    drawCircle();  
  109.    drawCenter();  
  110.    drawHands();  
  111.   
  112.    context.restore();  
  113.   
  114.    drawNumerals();  
  115.   
  116.    updateClockImage();  
  117. }  
  118.   
  119.   
  120. context.font = FONT_HEIGHT + 'px Arial';  
  121. loop = setInterval(drawClock, 1000);  
  122.           
  123.     </script>  
  124.   </body>  
  125. </html>  

离屏演示地址：http://sandbox.runjs.cn/show/lgymk7zo

离屏非离屏并存效果：http://sandbox.runjs.cn/show/uzxeuq4o

Arden Zhao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
3.8 使用离屏Canvas制作放大镜效果｜离屏Canvas图像处理｜Canvas图形、动画、游戏开发从入门到精通全系列课程
08-31
3.8_使用离屏Canvas制作放大镜效果｜离屏Canvas图像处理｜Canvas图形、动画、游戏开发从入门到精通全系列课程
Canvas API-OffscreenCanvas的属性和方法
yuanhongkun的博客
05-14 877
Canvas - Web API 接口参考 | MDN (mozilla.org)
离屏渲染（OffscreenRendering）
yihuangran的博客
07-25 1898
在此模式下，所有的渲染操作都会在当前屏幕视图之外的内存区域进行。只有当所有的渲染操作完成后，才会将最终的图像传输到屏幕上。canvas）上进行所有的绘制操作，这包括绘制图像和一些额外的元素（如注视点、手势、面部等）。然后只有当所有的绘制操作都完成后，才会把最终的图像渲染到页面上的。这种方式的一个重要好处是可以避免屏幕闪烁或者不必要的重绘，因为所有的渲染工作都是在后台完成的，用户不会看到半成品的渲染结果。总的来说，离屏渲染是一个强大且灵活的工具，能提供更优雅和高效的渲染解决方案。canvas 元素上。
canvas的性能优化
最新发布
桂云帆的博客
06-26 870
同时，上面所述的缓存用法，我因为贪图方便，所以是每个对象一个离屏canvas，其实离屏canvas也不能用的太泛滥，如果用太多离屏canvas也会有性能问题，请尽量合理利用离屏canvas。可以看到上面的DEMO的性能不一样，下面分析一下原因：为了实现每个圈的样式，所以绘制圈圈时我用了循环绘制，如果没用启用缓存，当页面的圈圈数量达到一定时，动画每一帧就要大量调用canvas的API，要进行大量的计算，这样再好的浏览器也会被拖垮啦。所以，我的方法很简单，每个圈圈对象里面给他一个离屏canvas作缓存区。
Canvas图像与视频基础,离屏19
编程是一门实践技术
05-22 637
-2--图像的绘制存在安全问题，默认的情况下允许绘制不属于自己域的图像，但不能通过Canvas API保存或修改其它域中的图像。--3--在使用这些API时性能也是一个需要关注的方面，不同的编码其效率不太一样，有一个大致的参考网站:【http://jsperf.com】chrome:在命令行中指定：'--allow-file-access-from-files'参数来启动浏览器；--1--有时两个canvas的相互绘制需要创建离屏canvas，离屏技术实际上是用空间换时间的一种技术。
canvas性能优化——离屏渲染
热门推荐
xhsdnn的专栏
08-14 2万+
零、写在前面 最近在做一些canvas以及WebGL之类的动画，突然发现做粒子动画的时候在数量过多的时候很卡，性能特别低，所以了解了一下性能优化的一些方法，在这里记录一下，也希望得到跟多优化方法的分享以及错误的指正。 这是示例代码以及展示效果，另外可能根据不同设备的本身性能差异效果可能跟下面展示的数据不完全一样，但是大同小异。 一、正常动画实践 为了使用户达到更好的体验，做动画的时候都知道...
离屏canvas
a1057267039的博客
10-29 1332
一、概念 离屏canvas是在内存中创建一个canvas元素，未通过dom操作显示到页面上去 二、场景 用于需频繁调用canvas API 底部背景（canvas绘制的）不需要改变的 批量上传图片，web端压缩 web绘制图片，本地保存 三、用法 创建一个canvas元素 web绘制所需图形 通过canvas API drawImage方法绘制到页面canvas上去显示 四、代码展示 function animate(y, isDown){ ctx.clearRect(0, 0, 200, 200)
离屏缩放canvas
11-13
利用canvas实现图片缩放可以发散扩展为游戏背景图片
canvas离屏技术与放大镜实现代码示例
09-22
这种技术的主要优点在于，我们可以对离屏Canvas进行复杂的计算或渲染，而不会影响主线程的性能，因为这些操作是在后台进行的。当计算完成后再将结果绘制到主Canvas上，从而提高页面的响应速度。 2. 实现水印： 在...
3.7 canvas和鼠标交互｜离屏Canvas图像处理｜Canvas图形、动画、游戏开发从入门到精通全系列课程
08-31
3.7_canvas和鼠标交互｜离屏Canvas图像处理｜Canvas图形、动画、游戏开发从入门到精通全系列课程
小程序 Canvas 导出图片记
u011352988的博客
11-07 560
小程序编辑图片，离屏 Canvas实现导出。
微信小程序 离屏Canvas制作分享海报以及导出思路
qq_41261218的博客
10-21 722
不支持离屏Canvas，所以只能通过Canvas的。大致实现代码如下【不需要wxml代码】将文件写入，再进行预览。转base64，再通过。
小程序离屏canvas(createOffscreenCanvas)生成推广海报
Null - 滨
05-24 2591
小程序离屏canvas(createOffscreenCanvas)生成推广海报 离屏canvas调用wx.canvasToTempFilePath报错Failed to execute ‘drawImage’ on ‘CanvasRenderingContext2D’: The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCan
微信小程序-离屏canvas给照片添加水印
JavaScript_css_h的博客
09-26 735
微信小程序实现安卓和IOS端的离屏canvas
Canvas高阶使用技巧-变换，状态保存，离屏缓冲，粒子爆炸效果，实际案例操作
Lbsssss的博客
07-15 534
Canvas高阶使用技巧-变换，状态保存，离屏缓冲，粒子爆炸效果，实际案例操作
canvas 离屏渲染
txl910514的专栏
05-14 708
https://www.cnblogs.com/mopagunda/p/5622911.html https://www.cnblogs.com/sunshq/p/10282647.html https://zhuanlan.zhihu.com/p/34698375 https://www.webhek.com/post/convert-canvas-image.html https://blog.csdn.net/qq_26733915/article/details/81675124
Canvas的常用api简介——变换，状态保存，离屏缓冲
让技术为我所用
02-10 561
文章目录正文1、绘制几何图形，文本，位图等2、位置，形状变换等平移操作缩放操作旋转操作倾斜操作切割操作矩阵3、状态保存和恢复示例一示例二4、离屏缓冲相关推荐 正文 1、绘制几何图形，文本，位图等 void drawBitmap(Bitmap bitmap,float left,float top,Paint paint):在指定坐标绘制位图。 void drawLine(float startX,float startY,float stopX,float stopY,Paint paint):根据给定
离屏canvas 内存占用
03-28
离屏canvas的内存占用取决于其尺寸和绘制内容的复杂度。一般来说，离屏canvas的尺寸越大，绘制内容越复杂，其内存占用就越大。 在使用离屏canvas时，应该尽可能减小其尺寸，避免不必要的绘制操作，及时释放不需要的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值