canvas

dom元素转为图片到本地

由 吃可爱长大的小学妹 提交于 2020-02-04 00:22:40
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 > <

How to render icon fonts on HTML canvas and Material Design icon fonts in particular?

由 百般思念 提交于 2020-02-03 09:26:06
问题 This wonderful answer details how to include icons from FontAwesome in a HTML canvas. Adapting the code for icon font from Material Design doesn't work, however. All the code is the same except for replacing FontAwesome values for Material Design values. Code below. Codepen: https://codepen.io/Crashalot/pen/dyyEPWV 1) How do you incorporate icons from Material Design in HTML canvas? 2) How do you incorporate icons from any icon font (e.g., https://github.com/framework7io/framework7-icons)?

[ html canvas arcTo ] canvas绘图 arcTo()属性研究实例演示

由 一世执手 提交于 2020-02-03 06:40:38
arc与arcTo，从名字都能看出来相似。arcTo也是画曲线的方法，而且他画出的曲线也是正圆的一段弧线。但他的参数和arc简直是不共戴天~ ctx.arcTo(x1,y1,x2,y2,radius); arcTo的参数中包括两个点，而且这两个点中并没有表示圆心的点，仅仅最后的参数是圆的半径，表示arcTo和圆有那么点关系。 网上关于arcTo的文章很少，好不容易找到一篇还是外国的；而且canvas画图木有直观工具，只能靠猜，arcTo害我猜了半天。。 为了直观的描述，我采取了一种辅助办法：arcTo画到哪里，我就用lineTo也画到相应的点，以查看他们的关系。就是画辅助线。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 var x0 = 100 , y0 = 400 , x1 = 500 , y1 = 400 , x2 = 450 , y2 = 450 ; ctx. beginPath ( ) ; ctx. moveTo (x0 ,y0 ) ; ctx. strokeStyle = "#f00" ; ctx. lineWidth = 2 ; ctx. arcTo (x1 ,y1 ,x2 ,y2 , 20 ) ; ctx. stroke ( ) ; ctx. beginPath ( ) ; ctx.

html5 canvas arcTo()

由 独自空忆成欢 提交于 2020-02-03 05:17:23
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>html5 canvas从圆开始</title> <script src="js/modernizr.js"></script> </head> <body> <script type="text/javascript"> window.addEventListener('load',eventWindowLoaded,false); function eventWindowLoaded(){ canvasApp(); } function canvasSupport(){ return Modernizr.canvas; } function canvasApp(){ if(!canvasSupport()){ return; }else{ var theCanvas = document

canvas arcTo()用法详解

由 时光总嘲笑我的痴心妄想 提交于 2020-02-03 05:12:46
CanvasRenderingContext2D对象的方法arcTo()的用法。 arcTo(x1, y1, x2, y2, radius) arcTo() 方法将利用当前端点、端点1 (x1,y1) 和端点2 (x2,y2) 这三个点所形成的夹角，然后绘制一段与夹角的两边相切并且半径为 radius 的圆上的弧线。 弧线的起点就是当前端点所在边与圆的切点，弧线的终点就是端点2 (x2,y2) 所在边与圆的切点，并且绘制的弧线是两个切点之间长度最短的那个圆弧。 此外，如果当前端点不是弧线起点， arcTo() 方法还将添加一条当前端点到弧线起点的直线线段。 上述字面解释可能不易理解，我们最好结合实际的代码示例来帮助理解，请先参考下面的代码： //获取Canvas对象(画布) var canvas = document.getElementById("myCanvas"); //简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误 if(canvas.getContext){ //获取对应的CanvasRenderingContext2D对象(画笔) var ctx = canvas.getContext("2d"); //指定绘制路径的起始点 ctx.moveTo(50, 50); //绘制一条到坐标(150,50)的水平直线 ctx

HTML5绘图笔记7：Path2D对象

由 左心房为你撑大大i 提交于 2020-02-03 04:30:04
使用Path2D对象 new Path2D ( ) ; new Path2D ( path ) ; new Path2D ( d ) ; 例子1 < canvas id = "myCanvas" width = "600" height = "400" > < / canvas > < script type = "text/javascript" > var canvas = document . getElementById ( "myCanvas" ) ; var context = canvas . getContext ( '2d' ) ; context . fillStyle = "#EEEEFF" ; context . fillRect ( 0 , 0 , 600 , 400 ) ; var n = 0 ; for ( var i = 0 ; i < 10 ; i ++ ) { var path = new Path2D ( ) ; path . arc ( i * 25 , i * 25 , i * 10 , 0 , Math . PI * 2 , true ) ; path . closePath ( ) ; context . fillStyle = 'rgba(255, 0, 0, 0.25)' ; context . fill ( path ) ; }

canvas之arcTo

由 大憨熊 提交于 2020-02-03 04:18:43
arc与arcTo，从名字都能看出来相似。arcTo也是画曲线的方法，而且他画出的曲线也是正圆的一段弧线。但他的参数和arc简直是不共戴天~ ctx.arcTo(x1,y1,x2,y2,radius); arcTo的参数中包括两个点，而且这两个点中并没有表示圆心的点，仅仅最后的参数是圆的半径，表示arcTo和圆有那么点关系。 网上关于arcTo的文章很少，好不容易找到一篇还是外国的；而且canvas画图木有直观工具，只能靠猜，arcTo害我猜了半天。。 为了直观的描述，我采取了一种辅助办法：arcTo画到哪里，我就用lineTo也画到相应的点，以查看他们的关系。就是画辅助线。 var x0=100, y0=400, x1 = 500, y1 = 400, x2 = 450, y2 = 450; ctx.beginPath(); ctx.moveTo(x0,y0); ctx.strokeStyle = "#f00"; ctx.lineWidth = 2; ctx.arcTo(x1,y1,x2,y2,20); ctx.stroke(); ctx.beginPath(); ctx.strokeStyle = "rgba(0,0,0,0.5)"; ctx.lineWidth = 1; ctx.moveTo(x0,y0); ctx.lineTo(x1,y1); ctx.fillText(

绘制文字 --Canvas的基本操作

由 我的未来我决定 提交于 2020-02-03 03:55:04
绘制文字时可以使用 fillText 方法或 strokeText 方法。 fillText 方法用填充方式绘制字符串，该方法的定义如下所示： void fillText(text,x,y,[maxWidth]); 该方法接受四个参数，第一个参数text表示要绘制的文字，第二个参数 x表示绘制文字的起点横坐标，第三个参数y表示绘制文字的起点纵坐 标，第四个参数maxWidth为可选参数，表示显示文字时的最大宽度，可以防止文字溢出。 strokeText 方法用轮廓方式绘制字符串，该方法的定义如下所示： void stroke text(text,x,y,[maxWidth]); 该方法参数功能与fillText方法相同。 <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>文字的绘制</title> <script > function draw(id) { var canvas = document.getElementById(id); if (canvas == null) return false; var context=canvas.getContext('2d'); context.fillStyle= '#00f'; context.font= 'italic 30px sans-serif'; context

应用图像 --Canvas的基本操作

由 时光总嘲笑我的痴心妄想 提交于 2020-02-03 03:18:59
1.绘制图像 绘制图像时，需要使用drawImage方法，该方法的定义 如下所示： drawImage(image, x, y) 第一种方法只使用三个参数，第一个参数可以是一个img元素、一个video元素，或者一个JavaScript中的image对象，使用该参数代表的实际对象来装载图像文件。x与y为绘制时该图像在画布中的起始坐标。 drawImage(image, x, y, width, height) 第二种方法中前三个参数的使用方法与第一种方法中的使用方法一样，width、 height是指绘制时的图像的宽度与高度。使用第一种方法绘制出来的图像与原图大小相同，而使用第二种方法可以用来进行图像缩放。 drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 第三种方法可以用来将画布中已绘制的图像的全部或者局部区 域复制到画布中的另一个位置上。该方法使用九个参数，image 仍然代表被复制的图像文件，sx与sy分别表示源图像的被复制区 域在画布中的起始横坐标与起始纵坐标，sWidth与sHeight表示 被复制区域的宽度与高度，dx与dy表示复制后的目标图像在画布 中的起始横坐标与起始纵坐标，dWidth与dHeight表示复制后的 目标图像的宽度与高度。该方法可以只复制图像的局部，只要将

给图形绘制阴影 --Canvas的基本操作

由 喜夏-厌秋 提交于 2020-02-03 03:03:17
在HTML5中，使用canvas元素可以给图形添加阴影效果。添加阴影效果时 ，只需利用图形上下文对象的几个关于阴影绘制的属性就可以了，如下所示： shadowOffsetX ——阴影的横向位移量 shadowOffsetY ——阴影的纵向位移量 shadowBlur ——阴影的模糊范围 shadowColor ——阴影的颜色 shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距 离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表 示会往下或右延伸，他们默认都是 0。 shadowBlur 用于设定阴影的模糊程度，它表示图形阴影边缘的模糊范围。 如果不希望阴影的边缘太清晰，需要将阴影的边缘模糊化时可以使用该属性。 设定该属性值时必须要设定为比0大的数字，否则将被忽略。一般设定在0至 10之间，开发时可以根据情况调整这个数值，以达到满意效果。 shadowColor 用于设定阴影效果的延伸，值可以是标准的 CSS 颜色值， 默认是全透明的黑色。 <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>为文字绘制阴影效果</title> <script > function draw(id) { var context = document.getElementById(
订阅 canvas