CANVAS - 技术教程文章

HTML5—canvas绘制图形(1)【代码】【图】

1、canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“画布”,我们可以利用js脚本在“画布”上绘制图形。 1.1canvas元素 在利用canvas绘制图形之前,我们首先需要在页面中放置一个canvas元素,如下代码:<canvas id="mycanvas" width="400" height="400">您的浏览器out了</canvas> 说明:(1)放置canva...

canvas线与弧【代码】

1、线var canvas = document.getElementById(‘canvas‘); canvas.width = 800;//canvas宽 canvas.height = 500;//canvas高var context = canvas.getContext(‘2d‘);//获取绘图上下文环境 context.beginPath();//声明开始绘制新的路径 context.moveTo(100,100);//线起点 context.lineTo(700,400);//线转折 context.lineTo(100,400);//线转折 context.lineTo(100,100);//线终点 context.closePath();//路径定义结束 context.lineWi...

基于HTML5的Canvas技术实现前端的图片压缩【代码】

Canvas应用:图片压缩算法实现前端图片压缩应用场景前端页面限制用户只可以上传5MB大小的图片前端在接受到用户上传的图片之后,服务器只允许上传1MB大小的图片,此时需要前端将图片先进行压缩,压缩之后再调用图片上传接口将图片上传第一步:创建input元素,监听input表单域的change事件创建一个input元素,并且设置HTML5新增的type为file监听input元素的change事件,并通过e.target.files拿到用户上传的文件列表数组获取用户上传的...

用canvas画布画一个画板【代码】【图】

前段时间,在对H5的回顾中突然对canvas有了感觉,闲来无事便对其进行了一些捯饬。这不,上周我还做了一个好玩的画板呢,废话不多说,直接上代码(PS:翠花,上代码~):HTML部分:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Canvas 制作画板</title><style>h1{text-align: center;margin: 0 auto;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;...

canvas之动态时钟【代码】

1function showTime(){2var can=document.getElementById("canvas");3var c=can.getContext("2d");//定义2D画布 4 can.width="1000";5 can.height="600";6//平移确定中心 7 c.translate(500,300);8//获取本地时间 9var sum=new Date(); 10var sh=sum.getHours(); 11var sm=sum.getMinutes(); 12var se=sum.getSeconds(); 13 sh=sh>=12?sh-12:sh; 14//时针15 c.save(); 16 c.ro...

CSS3-Canvas画布(线条)【代码】

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3-Canvas画布(线条)</title> <script> window.onload=function () { var canvas=document.getElementById("canvas");//获取canvas对象 var ctx=canvas.getContext("2d"); //创建二维的绘图上下文对象 //通过上下文对象调用属性或方法来绘图 ctx.beginPath();// “beginPath()” 表开始一条路径或者重置当...

Canvas转换为Blob对象并使用Ajax发送【代码】

Canvas转换为Blob对象并使用Ajax发送 转换为Blob对象后,可以使用Ajax上传图像文件。先从canvas获取dataurl, 再将dataurl转换为Blob对象 var dataurl = canvas.toDataURL(‘image/png‘); var blob = dataURLtoBlob(dataurl); //使用ajax发送var fd = new FormData(); fd.append("image", blob, "image.png"); var xhr = new XMLHttpRequest(); xhr.open(‘POST‘, ‘/server‘, true); xhr.send(fd); 转:https://blog.csdn.net/...

Delphi绘图相关对象(TCanvas对象的方法)

TCanvas对象的方法 方法说明ArcArc(x1,y1,x2,y2,x3,y3,x4,y4 : Integer);Arc方法在椭圆上画一段弧,椭圆由(x1,y1)、(x2,y2) 两点所确定的椭圆决定。弧的起点是椭圆圆周和椭圆中心与(x3,y3)连线的交点。弧矩形终点是椭圆圆周和椭圆中心与(x4,y4)连线的交点以逆时针方向画弧ChordChord(x1,y1,x2,yx,x3,y3,x4,y4 : Integer);Chord方法连接椭圆上两点,椭圆由(x1,y1)、(x2,y3) 两点所确定的矩形决定,(x3,y3)是始点,(x4,y4)是终点Brus...

【前端】Vue利用html2Canvas将Dom内容生成图片并下载(解决svg无法显示的问题)【代码】

需求:将页面中DIV内容块(包含svg流程节点)生成图片并直接下载到用户本地,并且不影响之前的svg图的使用实现:1、安装依赖cnpm install --save html2canvas cnpm install --save canvg@2.0.0-beta.1 canvas@^2 jsdom@^13 xmldom@^0 2、引入依赖import html2canvas from "html2canvas"; import canvg from "canvg"; 3、代码实现主要是两个问题SVG无法显示: 借助canvg将svg转canvas不能影响原有的元素显示:上一步会改变原有的dom...

Canvas标签初探【代码】

学了一点基础知识,感觉好神奇,全部练习代码<html><head><meta http-equiv=Content-Type content="text/html;charset=utf-8"><title>Canvas element size: 600 x 300, Canvas drawing surface size: 600 x 300</title><style> body {background: #dddddd;}#canvas {margin: 10px;padding: 10px;background: #ffffff;border: thin inset #aaaaaa;}#canvas2 {margin: 10px;padding: 10px;background: #ffffff;border: thin inset #a...

canvas.save()和canvas.restore()作用

文章转自:oney139;最终所有权归作者所有。链接:http://blog.csdn.net/oney139/article/details/8143281。canvas.save()和canvas.restore():是两个相互匹配出现的,作用是用来存储画布的状态和取出保存的状态的。这里稍微解释一下。当我们对画布进行旋转,缩放,平移等操作的时候其实是对特定的元素进行操作,比如图片,一个矩形等。但是当你用canvas的方法来进行这些操作的时候,其实是对整个画布进行了操作,那么之后在画布上的...

学者玩玩Canvas-写个简单的模拟时钟【代码】【图】

最近在看HTML5,随便玩玩Canvas,于是想着写个简单的模拟时钟,不过想象力不够丰富,没啥好创意,做的比较丑~~ 哈哈Demon点这儿你懂得 哈哈代码:/************************************************************************ ************************************************************************* case Name : clock - jQuery Plugin case Revison : 1.0 case Date : 2014-4-02 case Author: ...

html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法【图】

继续讲canvas中画曲线的方法,今天讲quadraticCurveTo。 说实话这个方法有点吓人,单从函数名称上都可以初体验。话说,我觉得有必要把这个函数名缩短。 quadratic的意思是二次,即数学中二次元方程那个二次。而ctx.quadraticCurveTo的参数如下: 复制代码代码如下:ctx.quadraticCurveTo(x1,y1,x,y); 其中x,y是终点的坐标,而x1,y1是曲线控制点的坐标?什么?你问我起点在哪里?起点在此之前用moveTo确定。 我之所以把控制点的坐标带...

canvas与svg特性和使用对比【代码】

什么是 Canvas?HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域,您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。什么是SVG?SVG 指可伸缩矢量图形 (Scalable Vector Graphics)SVG 用于定义用于网络的基于矢量的图形SVG 使用 XML 格式定义图形SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失SVG 是万维网联盟的标准SVG 的优势与其他图像格式相比(比如 ...

解析json结构绘制canvas【代码】【图】

在工作中偶尔会遇到绘制转发卡/邀请卡的业务,且这个转发卡/邀请卡的风格会有很多,要求最后生成图片。这时候如果使用一张图片绘制一个canvas,这个工作量会相当大。分析一下转发邀请的内容,会发现所有的里面的元素都是一样的,只是风格不一致,所以我使用了解析json结构来绘制canvas,如果后期需要增加风格,只要增加json就可以了。demo图大概这样:点击下方的不同风格的图片就会生成不一样的图片。下面我们要实现代码:style样式...

h5标签canvas关于getImageData跨域的问题【代码】

h5标签canvas关于getImageData跨域的问题 在学习h5的时候,canvas标签中getImageData()报错:security error!具体代码如下(chrome浏览器):function createGSCanvas(img){var canvas=document.createElement("canvas");canvas.width=img.width;canvas.height=img.height;var ctx=canvas.getContext("2d");ctx.drawImage(img,0,0);var c=ctx.getImageData(0,0,img.width,img.height);for(var i=0;i<c.height;i++){for(var j=0;j<...

H5canvas赛车游戏-基于lufylegend引擎【图】

lufylegend引擎是canvas游戏中,比较简单的引擎之一,它不需要配置环境,类似引入jquery包的方式,引用对应js文件即可lufylegend官方网站:http://www.lufylegend.com/ 首先看下游戏的截图 游戏设计比较粗糙,逻辑也很简单,就是通过点击左右来控制红色的汽车躲避对面开过来的车,若发生碰撞则游戏结束,另游戏速度会越来越快 游戏演示地址:http://htmlpreview.github.io/?https://github.com/gavin125/H5game-sc/blob/master/in...

HTML5 Canvas锯齿图代码实例

效果图:提示:把代码复制到一个html文件中并保存,直接打开即可看到效果。实现代码:复制代码代码如下:<!doctype html><html lang="zh"><head><meta charset="gbk"><title>锯齿图</title><script type="text/javascript">window.addEventListener("load", eventWindowLoaded, false);function eventWindowLoaded(){var x,y;var theCanvas = document.getElementById("canvas");var context = theCanvas.getContext("2d");//Boxcon...

Android 绘图之一:Canvas 及 Paint 简介【图】

前言  除了使用已有的图片之外,Android应用常常需要在运行时根据场景动态生成2D图片,比如手机游戏,这就需要借助于Android2D绘图的支持。本篇博客主要讲解一下Android下使用Canvas进行绘图的相关操作。最后将以一个简单的Demo演示如何使用Canvas在ImageView上画图并保存。画布Canvas  在Android下进行2D绘图需要Canvas类的支持,它位于"android.graphics.Canvas"包下,直译过来为画布的意思,用于完成在View上的绘图。   ...

html canvas 简单体验

绘制直线var canvas = document.getElementById(‘c1‘);var context = canvas.getContext(‘2d‘); // context.moveTo(10 ,50); //起点// context.lineTo(1000,50); //终点// context.lineWidth = 20; //线宽// context.strokeStyle=‘#cd3828‘; //颜色// context.strokeStyle= "rgb(205,40,40)";// context.lineCap = ‘round‘; //线头是圆形 round // context.stroke(); //开始绘制 // // 绘制第二条线// context.beginPath...

canvas 画图工具 -- CanvasDraw【代码】

最近有些项目中用到了canvas画图;为了方便封装了一下: 他的强大之处是 处理了各种偏针的问题:  1,css 强制宽高的变形 造成的偏针  2,给canvas加边 造成的偏针  3,上层父级缩放 造成的偏针 ( 前两种函数自行校正,第3种要传参)更多去 github 吧,记得点赞谢谢CanvasDraw:https://github.com/songyijian/CanvasDraw var c2=new CanvasDraw(‘#canvas2‘,{‘attr‘:{‘width‘:400,‘height‘:400}, ‘lineWidth‘:4 ,‘...

用CSS3和Canvas来画网格【代码】【图】

我们经常使用一些excel表格来处理数据,在html中,我们可以用table来制成表格。今天来看一下一些不同的方法。方法一:使用CSS3的background的linear-gradient属性linear-gradient表示一种线性渐变,指定好开始的坐标,以及线性渐变的参数,就可以实现背景颜色的多变。先来看效果图:看html代码:<div class="grid"></div>CSS代码: div,canvas{width: 400px;height: 280px;margin: 10px;border: 1px solid #000000;}.grid{b...

cesium使用canvas自定义广告牌标注【代码】

可用于cesium中添加个性化的标注,非常的好用~// 创建二维画布 const canvas = document.createElement(‘canvas‘); const ctx = canvas.getContext(‘2d‘);...绘制所需图案...// 将画布转化成图片 let image = new Image(); image.src = canvas.toDataURL("image/jpg")// 使用cesium创建实体viewer.entities.add({   position: Cesium.Cartesian3.fromDegrees(params.tgySjJcxx.jcxxJd, params.tgySjJcxx.jcxxWd,78),   nam...

利用canvas和bitmap如何对图片缩放到适应屏幕大小?

创建你自己想要大小的 bitmap public static Bitmap resizeBitmap(Bitmap bitmap, int w, int h) { if (bitmap != null) { int width = bitmap.getWidth(); int height = bitmap.getHeight(); int newWidth = w; int newHeight = h; float scaleWidth = ((float) newWidth) / width; float scaleHeight = ((float) newHeight) / height; M...

canvas模糊事件处理

不知道大家项目中有没有用到canvas时还有时候会出现模糊的情况;具体推测可能是屏幕改变了,然而canvas的渲染对象并没有跟着一起变;这里简单介绍个对象,window.devicePixelRatio→详细介绍http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。公式表示就是:window.devicePixelRatio = 物理像素 / dips var ...

设置canvas的背景成白色

解决方案一:将透明的pixel设成白色因为png图片的背景都是透明的,所以我们可以寻找透明的pixel,然后将其全部设置成白色,核心代码如下:JavaScript Code复制内容到剪贴板 // 将canvas的透明背景设置成白色 var imageData = context.getImageData(0, 0, canvas.width, canvas.height); for(var i = 0; i < imageData.data.length; i += 4) { // 当该像素是透明的,则设置成白色 if(imageData.data[i + 3] == 0) { imageData.data[i] = 2...

实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码

这是一个很酷的HTML5 Canvas动画,它将模拟的是我们现实生活中烟花绽放的动画特效,效果非常逼真,但是毕竟是电脑模拟,带女朋友看就算了,效果还是差了点,呵呵。这个HTML5 Canvas动画有一点比较出色,就是其性能,Chrome上基本没有卡的感觉,就算你放出很多烟花也一样。  下面我们来简单分析一下实现这款HTML5烟花特效的过程及代码,主要由HTML代码、CSS代码以及Javascript代码组成,当然javascript代码是最重要的。  HTML代...

canvas离屏技术与放大镜实现【代码】

教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步> (原文)canvas 离屏技术与放大镜实现' ref='nofollow'>>>> (原文)canvas 离屏技术与放大镜实现。更多讨论或者错误提交,也请移步。利用canvas除了可以实现滤镜,还可以利用离屏技术放大镜功能。为了方便讲解,本文分为 2 个应用部分:实现水印和中心缩放实现放大镜1. 什么是离屏技术?canvas 学习和滤镜实现介绍过drawImage接口。除了绘制图像,这个接口还可以:将...

Canvas HTML5【代码】【图】

Canvas Examples一个canvas是在html页面上规则的区域。默认的,一个canvas没有边框和内容<canvas id="myCanvas" width="200" height="100"></canvas>基本步骤<script>var canvas = document.getElementById("myCanvas");//发现canvas元素var ctx = canvas.getContext("2d");//创建一个drawing对象 //在画布上画画ctx.fillStyle ="#FF0000"; ctx.fillRect(0,0,150,75); </script>HTML Canvas CoordinatesCanvas CoordinatesThe HTML...

HTML5-canvas【代码】

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width, initial-scale=1.0"> 6<meta http-equiv="X-UA-Compatible" content="ie=edge"> 7<title>Document</title> 8</head> 9<body>10<canvas id="myCanvas" width="300" height="300" style="border:1px solid black"></canvas>11<img id="scream" src="https://www.runoob.com/try/demo_source/img_the_screa...