每天一个JavaScript实例-canvas定时器动态的更新一个线条

最新推荐文章于 2023-06-08 15:50:16 发布
VIP文章 最新推荐文章于 2023-06-08 15:50:16 发布
阅读量2.3k 收藏
点赞数
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/waiting7436/article/details/40741799
版权 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>每天一个JavaScript实例-canvas定时器动态的更新一个线条</title>
<style>
	
</style>

<script>
window.onload = function(){
	var array1 = [[100,100],[150,50],[200,185],[250,185],[300,250],[350,100],[400,250],[450,100],[500,20],[550,80],[600,120]];

	var array2 = [[100,100],[150,150],[200,135],[250,285],[300,150],[350,150],[400,280],[450,100],[500,120],[550,80],[600,190]];

	var array3 = [[100,200],[150,100],[200,35],[250,185],[300,10],[350,15],[400,80],[450,100],[500,120],[550,80],[600,120]];

	var imgcanvas = document.getElementById("imgcanvas");
	if(imgcanvas.getContext){
		var ctx = imgcanvas.getContext('2d');

		//矩形包围线条图标
		ctx.strokeRect(0,0,600,300);

		//第一条线条
		ctx.beginPath();
		ctx.moveTo(0,100);
		for(var i=0;i<array1.length;i+&
最低0.47元/天 解锁文章
wxyoo1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas 的基本理解
playxmz的博客
02-17 206
# `HTML5CORE DAY03` 案例：写一个画板。（移动端） 涉及到相关移动端触摸事件： > 1. `touchstart` 开始触摸。 > 2. `touchmove` 触摸移动 。 > 3. `touchcancel` 触摸操作被打断。 > 4. `touchend` 触摸结束。 实现思路：开始触摸时，开启一条新路径，触摸移动时，绘制路径并描边即可。 #### `Canvas`提供了一些绘制路径的常用方法 `ctx.rect()`用.
Canvas粗解
weixin_42171785的博客
07-14 1840
粗略但全面的讲解canvas的基本使用
JavaScript全解析——canvas 入门（上）
千锋教育
05-04 3199
也就是说, 在描述线宽的时候, 实际上会从 0.5px 的位置绘制到 1.5px 的位置。○从坐标 ( 100, 100 ) 绘制到坐标 ( 300, 100 )○从坐标 ( 100, 100 ) 绘制到坐标 ( 300, 100 )○从坐标 ( 100, 100 ) 绘制到坐标 ( 300, 100 )所以在设置线段样式的时候, 会默认按照最后一次设置的样式来绘制所有的线段。●所以, 我们在进行 canvas 绘制内容的时候, 涉及到线段的时候。
【前端】【canvas详解 非常详细的使用方法】
PiPiFamily的博客
06-08 3782
canvas使用详细教学
javaScript 动画和canvas图形
m0_61773971的博客
05-16 573
使用requestAnimationFrame用来替代计时器与定时执行.
使用Canvas画布实现简单的计时器功能
weixin_44260108的博客
09-25 357
/从-90度开始，也就是-pi/2 = -90 * pi / 180。//计算新的角度， 秒数 每一个 6 度 6 / 180 = 30。//设置新原点 将150，150设置为新的坐标中心。
＜canvas＞利用Canvas绘制简易版挂钟
m0_48465196的博客
02-22 613
使用Canvas绘制一个挂钟
canvas 基础 和 动图案例
weixin_67642008的博客
11-06 2416
canvas 画布
前端性能优化：Canvas
薛定谔的猫-前端领域
05-14 2052
Canvas 最常见的用途是渲染动画，目前，所有的主流浏览器都支持。 渲染动画的基本原理，无非是反复地擦除和重绘。为了动画的流畅，60Hz 刷新率设备的帧预算为 16.67ms，在这个时间之内，计算每个对象的位置、状态，还需要把它们都画出来。高刷设备的帧预算更低。所以需要时刻关注性能，防止计算和绘制耗时过长造成卡顿。 基础优化 1. 在离屏canvas上预渲染相似的图形或重复的对象 对于在每个动画帧上的重复相同的绘制操作，请考虑将其分流到屏幕外的画布上。然后根据需要频繁地将屏幕外图像渲染到主..
UGUI源码（一）Canvas
weixin_42877243的博客
09-30 521
UGUI源码解读 --- Canvas.csCanvas.csCanvasUpdateRegistry.cs Canvas.cs //部分源码 public sealed class Canvas : Behaviour { public delegate void WillRenderCanvases(); //公有事件，在CanvasUpdateRegistry.cs的构造函数里，为willRenderCanvases事件添加了一个监听PerformUpdate。（后面贴了源码） //在渲染（
JS Canvas定时器模拟动态加载动画
10-21
主要为大家详细介绍了JS Canvas定时器模拟动态加载动画,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript-Canvas-to-Blob:JavaScript Canvas to Blob是将画布元素转换为Blob对象的功能
04-13
这会将JavaScript文件相对于当前目录安装在./node_modules/blueimp-canvas-to-blob/js/ ，您可以从中将它们复制到Web服务器提供的文件夹中。 接下来，在HTML标记中包含缩小JavaScript Canvas to Blob脚本： < ...
easy-canvas:一个简单的 HTML 画布元素库
07-14
易画布一个用于 HTML5 画布的小型且不完整的 javascript 库，我用来尝试画布功能。用法 var canvas = new ec.Canvas("canvasId");var myBox = new ec.Box(canvas);myBox.setX(100).setY(100).setWidth(50).setHeight...
simple-canvas-tool:一个简单的画布工具
05-19
一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view...
image-to-canvas:传递一个 HTMLImageElement 接收一个 Canvas
06-01
图像到画布 传递一个 HTMLImageElement 接收一个 Canvas用法 var imageToCanvas = require ( 'image-to-canvas' ) ;var image = new Image ( ) ;image . src = 'some uri' ;imageToCanvas ( image , function ( err ...
JavaScript应用实例-canvas画正方形.js
12-09
JavaScript应用实例-canvas画正方形.js
Canvas详解
热门推荐
发果叁
05-23 3万+
一、canvas 简介 1.1 什么是 canvas？（了解） 是 HTML5 提供的一种新标签 <canvas></canvas> 英 ['kænvəs] 美 ['kænvəs] 帆布 画布 Canvas 是一个矩形区域的画布，可以用 JavaScript 在上面绘画。控制其每一个像素。 canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 HTML5 之前的 web 页
应用canvas绘制动态时钟--每秒自动动态更新时间
weixin_30500105的博客
03-08 340
　　　　使用canvas绘制时钟 　下文是部分代码，完整代码参照：https://github.com/lemoncool/canvas-clock，可直接下载。 　首先看一下效果图：每隔一秒会动态更新时间 　　 　一、前期准备 　　1. HTML中准备一个容器存放画布，并为其设置width，height。 <div> <canvas id="clock...
canvas水波特效，可动态改变
前端技术
07-25 2423
&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style type="text/css"&gt; #c{ marg
ec-canvas 渲染的canvas 生成一个图片
最新发布
12-06
要将 ec-canvas 渲染的 canvas 生成一个图片，可以使用 canvas.toTempFilePath() 方法。具体步骤如下： 1. 获取 ec-canvas 组件的 canvas-id，例如 "mychart-line"。 2. 在页面的 js 文件中，使用 wx.createSelectorQuery() 方法获取到该 canvas 的节点信息。 3. 使用节点信息中的 canvas 节点调用 canvas.toTempFilePath() 方法，生成图片文件。 4. 将生成的图片文件路径传递给页面的 data 中的变量，以便在页面中显示图片。 下面是一个示例代码： ```javascript // 获取 canvas 节点信息 const query = wx.createSelectorQuery() query.select('#mychart-line').fields({ node: true, size: true }) .exec((res) => { const canvas = res[0].node const ctx = canvas.getContext('2d') // 绘制图表 // ... // 生成图片文件 canvas.toTempFilePath({ success: (res) => { // 将生成的图片文件路径传递给页面的 data 中的变量 this.setData({ chartImage: res.tempFilePath }) } }) }) ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值