canvas元素 | 易学教程

学习第十天（2019-11-23）

阅读更多关于学习第十天（2019-11-23）

第十五章使用Canvas绘图 HTML5添加的<canvas>元素负责在页面中设定一个区域，然后就可以通过JavaScript动态地在这个区域中绘制图形。如：<canvas id="drawing" width=" 200" height="200">A drawing of something.</canvas> 在使用<canvas>元素之前，首先要检测getContext()方法是否存在，这一步非常重要。有些浏览器会为HTML规范之外的元素创建默认的HTML元素对象。在这种情况下，即使 drawing 变量中保存着一个有效的元素引用，也检测不到 getContext()方法。一、使用2D上下文使用2D绘图上下文提供的方法，可以绘制简单的2D图形，比如矩形、弧线和路径。2D上下文的坐标开始于<canvas>元素的左上角，原点坐标是(0,0)。所有坐标值都基于这个原点计算，x值越大表示越靠右，y值越大表示越靠下。默认情况下，width和height表示水平和垂直两个方向上可用的像素数目。 1、填充和描边填充和描边两个操作取决于两个属性：fillStyle 和 strokeStyle。这两个属性的值可以是字符串、渐变对象或模式对象，而且它们的默认值都是"#000000"。 2、绘制矩形与矩形有关的方法包括 fillRect()、 strokeRect()和

HTML5 Canvas绘图基础

阅读更多关于 HTML5 Canvas绘图基础

一、canvas是什么？ canvas就是画布 canvas元素用于在网页上绘制2D图形和图像二、canvas坐标体系 canvas的默认宽高是300*150，要在脚本中对画布进行操作。踩坑注意：如果要对canvas画布的大小进行操作，不能在style上操作，要在内联样式上写或者js中操作，在style上改变宽高画布会被拉伸三、canvas画直线、曲线和圆（1）canvas画直线 <canvas id="myCanvas1"> 您的浏览器不支持Canvas，请升级浏览器 </canvas> <script> var canvas1 = document.getElementById('myCanvas1'); var ctx1 = canvas1.getContext('2d'); // ctx1.canvas.width = 100; //js获取宽高 ctx1.canvas.height = 100; ctx1.moveTo(0, 0); //起点 ctx1.lineTo(100, 100); //直线到100,100 ctx1.stroke(); //没有这个stroke()的话不会出现画布效果 </script> （2）canvas画圆和矩形 var canvas = document.getElementById('myCanvas'); var ctx =

Canvas 基础知识

阅读更多关于 Canvas 基础知识

<canvas> 标签是 HTML5 中的新标签。 <canvas> 标签只是图形容器，您必须使用脚本来绘制图形。 <canvas> 元素中的任何文本将会被显示在不支持 <canvas> 的浏览器中。 <canvas id="canvas"> 您的浏览器不支持canvas </canvas> 兼容性： IE 9、Firefox、Opera、Chrome 和 Safari 支持 <canvas> 标签。创建一个画布（Canvas） <canvas id="myCanvas" width="200" height="100"></canvas> Canvas 坐标 canvas 是一个二维网格。 canvas 的左上角坐标为 (0,0) Canvas - 路径在Canvas上画线，我们将使用以下两种方法： moveTo( x,y ) 定义线条开始坐标 lineTo( x,y ) 定义线条结束坐标实例：定义开始坐标(0,0), 和结束坐标 (200,100)。然后使用 stroke() 方法来绘制线条: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke(); 在canvas中绘制圆形,

vue中使用canvas绘制签名

阅读更多关于 vue中使用canvas绘制签名

不多说，上代码： <template> <div class="sign-canvas"> <canvas id="canvas" width="400" height="600" @mousedown="canvasDown($event)" @mousemove="canvasMove($event)" @mouseup="canvasUp()" @mouseleave="canvasLeave()" ref="canvas" > 抱歉，您的浏览器暂不支持canvas元素 </canvas> <div class="sign-btn"> <div class="clear" @click="clear"> 清空 </div> <div class="save" @click="save"> 保存 </div> </div> </div> </template> <script> export default { mounted() { this.show(); }, methods:{ show(){ this.canvas = this.$refs.canvas;// 指定canvas this.ctx = this.canvas.getContext("2d") // 设置2D渲染区域 this.ctx.lineWidth = 5; // 设置线的宽度 },

画布、拖放事件、音视频

阅读更多关于画布、拖放事件、音视频

一、拖放事件 1.1 设置拖拽给标签设置一个draggable设置为true, 标签就可以拖拽了 1.2 拖拽事件 1.2.1拖拽元素事件 (事件对象为被拖拽元素) ondragstart 拖拽前触发 ondragend 拖拽结束触发 ondrag 拖拽前、拖拽结束之间，连续触发看实例： <div draggable="true"><img src="images/225.jpg" alt="" style="width:100px;height: 100px;" ></div> <script> var box = document.querySelector("div"); box.ondragstart = function(){ console.log("我被拖拽了！"); } box.ondrag = function(){ console.log("我在被拖拽的过程中"); } box.ondragend = function(){ console.log("拖拽结束了！"); } </script> 1.2.2 目标元素事件 (俗解：意思就是拖拽的元素放在哪里) ondragenter 进入目标元素触发，相当于mouserover ondragover 进入目标，离开目标之间，连续触发 ondragleave 离开目标元素触发，相当于mouseout ondrop

Canvas + WebSocket + Redis 实现一个视频弹幕

阅读更多关于 Canvas + WebSocket + Redis 实现一个视频弹幕

原文出自：https://www.pandashen.com 页面布局首先，我们需要实现页面布局，在根目录创建 index.html 布局中我们需要有一个 video 多媒体标签引入我们的本地视频，添加输入弹幕的输入框、确认发送的按钮、颜色选择器、字体大小滑动条，创建一个 style.css 来调整页面布局的样式，这里我们顺便创建一个 index.js 文件用于后续实现我们的核心逻辑，先引入到页面当中。 HTML 布局代码如下：  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title>视频弹幕</title> </head> <body> <div id="cantainer"> <h2>Canvas + WebSocket + Redis 实现视频弹幕</h2> <div id="content"> <canvas id="canvas"></canvas> <video id="video" src="./barrage.mp4" controls></video> </div>  <input type="text" id="text"

10款面向HTML5 画布(Canvas)的JavaScript库

阅读更多关于 10款面向HTML5 画布(Canvas)的JavaScript库

10款面向HTML5 画布(Canvas)的JavaScript库 1. Processing.js Processing.js是一个开放的编程语言，在不使用Flash或Java小程序的前提下，可以实现程序图像、动画和互动的应用。Processing.js是轻量，易于了解掌握的理想工具，可用于可视化的数据，创建用户界面和开发基于Web的游戏。 2. FABRIC.JS FABRIC.JS是一款简单而强大的JavaScript Canvas 库，提供了互动的对象模型，同时还包含 Canvas-to-SVG 解析器。 3. oCanvas oCanvas是一个JavaScript框架，用于简化HTML5 Canvas标签的使用，可以利用对象来代替像素。 oCanvas 可以帮助你很容易的在 HTML5 的 Canvas 标签上创建对象，并且创建这些对象的动画。 4. jCanvas jCanvas 就是一个 jQuery 的绘图插件，它封装了一些绘制图形的方法，只需编写几行代码即可生成图形。 5. RGraph RGraph是一个使用HTML5 Canvas标签实现的图表制作Library。利用该Library生成的Chart具有可交互性，当鼠标点击或移过时会显示相应的信息，可以动态加载Chart或对特殊点进行缩放。 6. Two.js Two.js 是面向现代 Web

Vue + Canvas项目总结

阅读更多关于 Vue + Canvas项目总结

本文转载于: 猿2048 网站➣ https://www.mk2048.com/blog/blog.php?id=h1bcbii1aa 演示地址演示地址 PC端的项目啦，需要在电脑上看哦,而且最好用Chrome打开引言这是今年三月份帮学长做的一个项目，陪我度过了两个月的春招生活，整个项目做下来也是学到了很多东西，下面就开始我的分享啦，包括一些知识点总结和遇到的坑，dalao莫笑哈。项目概述主要功能如上图，左边是图形工具栏，右边是canvas，上面是清除、删除、旋转、切换格子背景、保存并下载图片的操作。代码是基于vue-cli码的，所以路由、vuex这些都不用讲啦，我们把重点放在canvas上面吧。知识点总结拖拽这里的拖拽是指把左边工具栏里的图形图形拖拽到右边画布里，三步完成：被拖拽元素设置 draggable="true" ；被拖拽元素还有三个相应的事件 dragstart drag dragend ，分别对应拖拽开始、拖拽中和拖拽结束，如果你希望在这些过程加上特效，可以试试，但更多的还是用作响应数据，比如让画布知道具体是哪个元素被拖拽进来了；被放置元素设置 dragover drop 两个事件，分别表示被拖拽元素在该元素范围内移动、被拖拽元素着陆,这里注意 dragover 事件函数内需设置 event.preventDefault() 防止弹出新页面

HTML5

阅读更多关于 HTML5

一、拖拽事件一个元素：在拖动目标上触发事件 (源元素) ondrag 元素正在拖动时触发 ondragstart 用户开始拖动元素时触发 ondragend 用户完成元素拖动后触发两个元素：释放目标时触发的事件: ondragenter 当被鼠标拖动的对象进入其容器范围内时触发此事件 ondragover 当某被拖动的对象在另一对象容器范围内拖动时触发此事件 ondragleave 当被鼠标拖动的对象离开其容器范围内时触发此事件 ondrop 在一个拖动过程中，释放鼠标键时触发此事件 ondrop有一个小 bug ，如果想使用该事件必须阻止 ondragover 事件的默认行为 e.dataTransfer 可以跨元素事件设置数据： e.dataTransfer.setData(key, value) 获得数据： e.dataTransfer.getData(key) 好处：不会产生全局变量二、音频(audio)和视频(video) 方法： play() : 播放 pause(): 暂停属性： volume :( 音量) 0~1 muted :( 是否静音) 值是布尔类型 duration :( 总播放时长) currentTime :( 当前的播放时间) 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta

解决使用canvas生成含有微信头像的邀请海报没有微信头像

阅读更多关于解决使用canvas生成含有微信头像的邀请海报没有微信头像

if (!string.IsNullOrEmpty(Request.QueryString["data"].ToString())) { HttpWebRequest request = (HttpWebRequest)WebRequest.Create(Request.QueryString["data"].ToString()); request.Timeout = 3000; WebResponse response = request.GetResponse(); Stream stream = response.GetResponseStream(); Bitmap image = new Bitmap(stream); //保存为PNG到内存流 MemoryStream ms = new MemoryStream(); image.Save(ms, ImageFormat.Png); //重新输出头像 Response.BinaryWrite(ms.GetBuffer()); Response.End(); ms.Close(); response.Close(); stream.Close(); } headimgurl " /> <script type="text/javascript"> window.onload = function () { var

订阅 canvas元素