canvas元素 | 易学教程

画布跟js.oop

阅读更多关于画布跟js.oop

<Canvas> 是HTML5中新出现的一个元素。就是可以通过 JS绘制图形。画布(Canvas)是一个没有内容也没有边框的矩形区域。我们可以控制里面的每一个像素。下面我们首先定义一个 Canvas元素： <canvas id="cancas" width="300" height="300"></canvas> canvas 只有两个属性，width和height，这些属性可选并且可以通过JS或者css来控制： <script type="text/javascript"> function draw() { var c = document.getElementById("cancas"); var cxt = c.getContext("2d");// 它可以通过canvas元素对象的getContext方法来获取，同时得到的还有一些画图需要调用的函数。 getContext() 接受一个用于描述其类型的值作为参数。也就是后面的 “2d” 或者 “3d” cxt.fillStyle = "#00ff00"; cxt.fillRect(0, 0, 150, 150);//第一个属性时距离x轴的距离，第二个是距离y轴的距离，第三第四个是宽度跟高度 } </script> 在做一个复杂的图形： <script type="text/javascript"> function

canvas简单图片处理(灰色处理)

阅读更多关于 canvas简单图片处理(灰色处理)

反色处理写的比较简单,灰色处理写了一些注释 <!DOCTYPE html> <html > <head > < meta charset = "UTF-8" > <title ></title > </head > <body > < canvas id ="board" width ="1000" height ="1000" style =" background : lightgrey ;" ></ canvas > </body > </html > < script type ="text/javascript" > var board = document.getElementById( "board"); var context = board.getContext( "2d"); //图像处理必须运行在服务器环境 var aImg = new Image(); aImg.src = "img/7.jpg" ; context.beginPath(); aImg. onload = function (){ //绘制一张图片到 canvas 画布 //三个参数分别为图片对象画布位置(X轴 Y轴) context.drawImage(aImg, 10, 10); //getimageData--获取图片指定区域的像素 var imageDatas = context

HTML5+CSS3入门学习（一）——HTML5

阅读更多关于 HTML5+CSS3入门学习（一）——HTML5

什么是 HTML5？ HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。 HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。 HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。 HTML5 是如何起步的？ HTML5 是 W3C 与 WHATWG 合作的结果。编者注：W3C 指 World Wide Web Consortium，万维网联盟。编者注：WHATWG 指 Web Hypertext Application Technology Working Group。 WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。为 HTML5 建立的一些规则： 1.新特性应该基于 HTML、CSS、DOM 以及 JavaScript。 2.减少对外部插件的需求（比如 Flash） 3.更优秀的错误处理 4.更多取代脚本的标记 5.HTML5 应该独立于设备 6.开发进程应对公众透明新特性 HTML5 中的一些有趣的新特性： 1.用于绘画的 canvas 元素 2.用于媒介回放的 video 和 audio 元素 3.对本地离线存储的更好的支持 4.新的特殊内容元素，比如 article

记录学习 Web 前端----绘图Canvas

阅读更多关于记录学习 Web 前端----绘图Canvas

绘图canvas （1）定义画布 <canvas id= "myCanvas" width= "860" height= "480" > 浏览器不支持画布 </canvas>  （2）设置画布样式画布样式 #myCanvas { border : 1px solid black ; } （3）JS 准备绘图上下文环境 <script> function draw(event) { var canvas = document. getElementById ( "myCanvas" ) ; //通过文档dcument它的方法来得到id是myCanvas这样的一个元素，保存在canvas里// var pen = canvas. getContext ( "2d" ) ; //当前我们绘图是一个平面的二维绘图，保存到pen---准备好画笔// pen. moveTo ( 50,50 ) ; //将画笔移动到起始点// pen. lineTo ( 300,300 ) ; //用lineTo绘图方法完成起始点到终点的绘制// pen.lineWidth = 5 ; //笔触的粗细// pen.strokeStyle = "red" ; //笔触的颜色// pen. stroke ( ) ; /

canvas画图

阅读更多关于 canvas画图

一，基本用法 1，使用前给canvas设定高度和宽度，出现在标签中的内容在浏览器不支持canvas时使用　　<canvas id="drawing" width="200",height="200">A drawing of something</canvas> 2，getContext("2d");取得绘图上下文的引用　　var drawing = document.getElementById("drawing"); 　　 if(drawing.getContext){ 　　　　 var context = drawing.getContext("2d"); 　　 } 3,使用toDataURL()方法，可以导出canvas元素上绘制的图像，接收一个MIME类型格式　　var drawing = document.getElementById("drawing"); 　　if(drawing.getContext){ 　　　　var context = drawing.getContext("2d"); 　　　　var imgURL = drawing.toDataURL("image/png"); 　　　　var image = document.createElement("img"); 　　　　image.src=imgURL; 　　　　document.body

WPF之路——Canvas布局(画布)

阅读更多关于 WPF之路——Canvas布局(画布)

Canvas为容器控件，用于定位 1.基本应用可以把 Canvas比作一个坐标系 ,所有的元素通过设置坐标来决定其在坐标系中的位置 .这个坐标系的原点并不是在中央 ,而是位于它的左上角 .见下图元素设置坐标的方法共有四个: Canvas.Top 设置元素距Canvas顶部的距离 Canvas.Bottom 设置元素距Canvas底部的距离 Canvas.Left 设置元素距Canvas左边界的距离 Canvas.Right 设置元素距Canvas右边界的距离 [html] view plain copy <Border HorizontalAlignment="Left" VerticalAlignment="Top" BorderBrush="Black" BorderThickness="2"> <Canvas Background="LightBlue" Width="400" Height="400"> <Button Canvas.Top="50">Canvas.Top="50"</Button> <Button Canvas.Bottom="50">Canvas.Bottom="50"</Button> <Button Canvas.Left="50">Canvas.Left="50"</Button> <Button Canvas.Right="50"

dom元素转为图片到本地

阅读更多关于 dom元素转为图片到本地

1.场景最近因为肺炎严重，不能到工作场地办公，所以远程在家工作。领导提出做一个捐赠页面，然后生成证书保存图片到本地，虽然最后因为企业没有权利发起社会捐赠被砍掉了，但是我还是决定写个demo练习下。 2.思路将dom元素转为canvas，然后canvas转base64图片，通过a标签的download实现下载。 3.代码贴上 < ! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < meta http - equiv = "X-UA-Compatible" content = "ie=edge" > < script src = "https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js" > < / script > < script src = "https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js" > < / script > < title > 图片下载 < / title > < / head > <

HTML5 canvas绘制图形

阅读更多关于 HTML5 canvas绘制图形

HTML5添加了许多新的标记元素如：< section >，< article >,< header >,< footer >也提供了很多交互以及媒体元素，类如< canvas >,< audio >,< vedio >等等。表单元素得到了加强，新增了颜色拾取器，数据选择器，滑动条和进度条，除此之外许多新的元素还带有自己的JavaScript和DOM API。着这一篇文章中我们主要介绍canvas画布. 画布Canvas 每个浏览器都可以显示静态图片，通过GIF可以实现一些动画，或者使用CSS加JavaScript也能变换一些样式，但是如果你想要与静态图片实现交互，那就难上加难了。而Canvas元素的出现解决的这个问题，画布canvas可以动态的创建和操作图形图像。 canvas简介 canvas 元素用于在网页上图形绘制。 HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。定义画布 < canvas >元素可以像任何一个普通的图像一样有margin，border，background等等属性。然而，这些样式不会影响在canvas中的实际图像。当开始时没有为canvas规定样式，canvas区域将会完全透明。创建方法： < canvas

Canvas入门

阅读更多关于 Canvas入门

转载自 Segmentfault-小白也能看懂的H5 Canvas Canvas 对象是 HTML5 中新增的。但Canvas也是常见的前端技术，但是由于API众多，使用复杂，且对程序员的数学功底、空间想象能力乃至审美都有一定要求，所以真正擅长canvas的前端并不多，但并不代表大家就学不好canvas。我在此将常用的canvas使用场景罗列出来希望能帮助到大家。一、创建Canvas Canvas的创建很简单，只需要一个 <canvas> 标签足以，而内部复杂的实现都交给浏览器搞定。 html: <canvas id="canvas"></canvas> 所有的绘制动作都需要在canvas上下文（context）中进行，因此我们需要先创建一个上下文。 js: const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); 除了 2d ，上下文还可以设置为： webgl , webgl2 , bitmaprenderer 二、设置canvas尺寸 js: canvas.width = 600; canvas.height = 600; 若要满屏显示可以： canvas.width = window.innerWidth; canvas.height = window

前端利用canvas给图片添加水印

阅读更多关于前端利用canvas给图片添加水印

本文发布于我的个人网站： http://wintc.top/article/27 ，转载请注明。　　前两天给个人网站添加了一个小功能，就是在文章编辑上传图片的时候自动给图片加上水印。给网页图片添加水印是个常见的功能，也是互联网内容作者保护自己版权的方法之一。本文简单记录一下借助 canvas 在前端实现图片添加水印的实现方法。　　canvas元素其实就是一个画布，我们可以很方便地绘制一些文字、线条、图形等，它也可以将一个img标签里渲染的图片画在画布上。　　我们在上传文件到后端的时候，使用input标签读取用户本地文件后得到的其实是一个 Blob 对象（更精确的说是File对象，特殊的Blob对象）；而在页面上展示一个图片使用的是img标签；绘制功能用canvas实现。添加水印的功能需要在img标签、canvas画布、Blob对象这三者之间相互转换，通过一些API可以完成这个工作：　　我们可以从本地读取图片Blob，然后渲染到img标签，使用canvas绘制img内容并且绘制水印内容到画布，再将canvas内容转为Blob对象上传服务器，这样就完整实现了图片+水印的功能。一、本地读取图像文件渲染到img标签　　本地读取图片文件将会得到一个Blob对象，我们可以借助 FileReader.readAsDataURL 方法读取Blob的内容

订阅 canvas元素