CANVAS - 技术教程文章

用html5中的canvas写的时钟【代码】【图】

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>时钟</title> <script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript">var cxs;var canvas;$(document).ready(function(){canvas=document.getElementById("canvas");cxs=canvas.ge...

初探canvas

canvas是html5新增的一个专用于图形处理的标签,利用canvas可以实现大部分图形操作canvas的一些基本操作与其他图形编程工具类似,包含:各种形状的边框、路径绘制和填充,画布属性调整,样式调整等:一、canvas环境构建进入html编辑环境即可。在body中添加canvas标签[html] <body> <canvas id="canvas1" width="400px" height="200px"></canvas><br /> </body> 这样就完成了一个canvas的铺设,但这样是远远不够的,在运用canvas之前...

HTML5中video标签与canvas绘图的使用【代码】【图】

video标签的使用  video标签定义视频, 它是html5中的新标签, 它的属性如下(参考自文档):domo01<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>demo01</title> </head> <body><video src="madashuai.mp4" loop="loop" autoplay="autoplay" controls="controls" width="800" height="500"></video> </body> </html>src 即视频的路径loop 即是否循环,即播放结束之后继续播放autoplay 即准备就绪之后就...

基于 HTML5 Canvas 的 3D 热力云图效果【转载】【代码】【图】

前言 数据蕴藏价值,但数据的价值需要用 IT 技术去发现、探索,可视化可以帮助人更好的去分析数据,信息的质量很大程度上依赖于其呈现方式。在数据分析上,热力图无疑是一种很好的方式。在很多行业中都有着广泛的应用。最近刚好项目中需要用到3D 热力图的效果展示。网上搜了相关资料,发现大多数是2D 效果或者伪3D 的,而 3D 粒子效果对于性能上的体验不是很好,于是取巧写了个3D 热力图的效果 。Demo : http://www.hightopo.com/...

-_-#【Canvas】measureText, translate, drawImage【代码】【图】

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><canvas id="canvas" width="600" height="600" style="background:gray"></canvas><script>var canvas = document.getElementById(‘canvas‘)context = canvas.getContext(‘2d‘)var text =‘Copyright‘var FONT_HEIGHT =100context.save()context.font = FONT_HEIGHT +‘px Arial‘var textMetrics = context.measureText(text)context.fillSt...

自定义View(二),强大的Canvas【图】

本文转自:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2012/1212/703.html Android中使用图形处理引擎,2D部分是android SDK内部自己提供,3D部分是用Open GL ES 1.0。今天我们主要要了解的是2D相关的,如果你想看3D的话那么可以跳过这篇文章。大部分2D使用的api都在android.graphics和android.graphics.drawable包中。他们提供了图形处理相关的: Canvas、ColorFilter、Point(点)和RetcF(矩形)等,还有一些动画相关的...

HTML5之Canvas时钟(网页效果--每日一更)【代码】

今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果。  话不多说,先看效果:http://webfront.verynet.cc/pc/canvas-clock.html   众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由JavaScript控制的即时模式位图区域。即时模式是指在画布上呈现像素的方式,  HTML5 Canvas通过JavaScript调用CanvasAPI,在每一帧完全重绘屏幕上的位图。详细将在下面代码进行说明。   HTML结构代码:1<canvas id="c...

canvas的相关知识【代码】

通过指定从何处开始,在何处结束,来绘制一条线:JavaScript 代码:<script type="text/javascript">var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.moveTo(10,10); cxt.lineTo(150,50); cxt.lineTo(10,50); cxt.stroke();</script> canvas 元素:<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas>...

Html5 canvas 画带箭头的线【代码】

var canvas=document.getElementById("canvas"); var context=canvas.getContext("2d"); function Line(x1,y1,x2,y2){ this.x1=x1; this.y1=y1; this.x2=x2; this.y2=y2; } Line.prototype.drawWithArrowheads=function(ctx){ // arbitrary styling ctx.strokeStyle="blue"; ctx.fillStyle="blue"; ...

小程序利用canvas生成图片加文字,保存到相册【图】

<view class=‘poste_box‘ id=‘canvas-container‘><canvas canvas-id="myCanvas" style="width:100%;height:384px;" bindtap=‘saveShareImg‘/></view> /* pages/certificate/certificate.wxss */page{">#fff;}.poste_box{width: 100%;margin: auto;margin-top: 50rpx;">#fff;}.savePoste{">#FF8427;width: 90%;margin-left: auto;margin-right: auto;margin-top:30rpx;color: #fff;}.saveTitle{font-size: 25rpx;color: #666;...

canvas-7globleCompositeOperation.html【代码】

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><canvas id="canvas" style="margin:0 auto;border:1px #ddd solid">The current browser does not support Canvas, can replace the browser a try!</canvas><script>window.onload =function(){var canvas = document.getElementById(‘canvas‘);canvas.width =1024;canvas.height =768;if(canvas.getContext(‘2d‘)){var co...

canvas和paint常用方法【代码】【图】

效果图:页面代码:@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);mPaint = new Paint();mPaint.setColor(Color.BLACK);//设置画笔颜色mPaint.setTextSize(14);//设置字体大小canvas.drawText(actionStr, 100, 100, mPaint);//写字mPaint.setStrokeWidth(10);//设置线条宽度mPaint.setStyle(Paint.Style.STROKE);//设置空心canvas.drawCircle(200, 250, 80, mPaint);//画圆mPaint.setAntiAlias(true);//消...

canvas学习绘制渐变色【代码】

1.createLinearGradient() 创建线性渐变//Linear adj. 直线的 线性的//Gradient n. 梯度 变化率createLinearGradient(x1,y1,x2,y2)——颜色渐变的起始坐标和终点坐标addColorStop(位置,"颜色值")——0表示起点...插入点...1表示终点,配置颜色停止点<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> canvas{background:#A9A9A0;} </style></head><...

HTML5_02之视频、音频、Canvas

1、HTML5新特性之视频播放——video: ①例:<video src=""></video> ②video标签默认为300*150的inline-block; ③成员属性: autoplay:是否自动播放; controls:是否显示播放控件; currentTime:当前播放到的时间; duration:总时长; defaultMuted:默认是否静音; loop:是否自动循环播放; muted:当前是否静音; paused:当前是否处于暂停状态; poster:"",在视频播放前的显示图片; volumn:当前播放音量;...

html2canvas 无法渲染网络图片及本地 解决方案【代码】【图】

使用html2canvas插件可以无法渲染图片的情况 在使用html2canvas的时候。如果元素中还包含网络图片。那么有很大的几率渲染不出来。即时把html2canvas的允许跨域打开也无济于事。这次就从根源解决这个问题。而且即时渲染出来了。其实同一张图片已经请求了2次(初始渲染一次,html2canvas渲染也请求了一次)。问题的根本:在插件中,图片请求的时候跨域了(甚至同域的图片都难请求)图片多也会导致图片请求失败 把图片放在OSS(云存储...

html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法【图】

一般绘图的方式有两种,即填充和描边,前面的文章已经讲了描边的方法stroke,本文就讲一下Canvas中填充图形的方法。 填充即fill(),很直白吧?而且和strokeStyle表示描边样式一样,fillStyle即表示填充样式。 ctx.fillStyle = ‘颜色‘;默认的填充样式是不透明的黑色 提问:未闭合的路径可以填充吗? 可以。Canvas会从你当前路径的终点直接连接到起点,然后填充。如图: 但你可以发现,最后一段没有描边。 记得我们前一篇文章用4条线...

一张图告诉你 canvas 中的 miterLimit 代表着什么【图】

一图胜千言, 图中有一条路径path, 沿着路径描了一条宽度为 width 的边, miterLimit 代表的是, 比例 ab/ac, 其中ac的长度为 1/2 width来看 mdn 上的描述, 进行验证miterLimit = max miterLength / lineWidth = 1 / sin ( min θ / 2 )The default miter limit of 10.0 will strip all miters for sharp angles below about 11 degrees.A miter limit equal to √2 ≈ 1.4142136 (rounded up) will strip miters for all acute angle...

基于HTML5 Canvas可撕裂布料效果【代码】【图】

分享一款布料效果的 HTML5 Canvas 应用演示,效果逼真。你会看到,借助 Canvas 的强大绘图和动画功能,只需很少的代码就能实现让您屏息凝神的效果。在线预览 源码下载实现的代码。html代码:<canvas id="c"></canvas><div id="info"><p><br>- 使用鼠标可以拉扯<br><br>- 右键可以切断布料<br><br></p></div><script type="text/javascript">document.getElementById(‘close‘).onmousedown =function (e) {e.preventDefault();d...

canvas导出图片方法总结

html代码<canvas id="canvas" width="100" height="100" ></canvas>js 代码var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");ctx.fileStyle="gray";ctx.fillReact(0,0,100,100);1.直接调用canvas对象的toDataURL方法转化为指定类型var newImg = new Image();newImg.src=canvas.toDataURL("image/png"));2.利用canvas对象的toBlob方法先通过toBlob将canvas对象转化为二进制对象,通过参数形式传入函数...

通过Canvas及File API缩放并上传图片完整示例【代码】

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>通过Canvas及File API缩放并上传图片</title> 5 <meta http-equiv="pragma" content="no-cache"> 6 <meta http-equiv="cache-control" content="no-cache"> 7 <meta http-equiv="expires" content="0"> 8 <meta http-equiv="keywords" content="Canvas,File,Image"> 10 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 11 <script> 12// 参数,最大高度 13var...

HTML5 Canvas中绘制椭圆的4种方法

概述HTML5中的Canvas并没有直接提供绘制椭圆的方法,下面是对几种绘制方法的总结。各种方法各有优缺,视情况选用。各方法的参数相同:1.context为Canvas的2D绘图环境对象,2.x为椭圆中心横坐标,3.y为椭圆中心纵坐标,4.a为椭圆横半轴长,5.b为椭圆纵半轴长。参数方程法该方法利用椭圆的参数方程来绘制椭圆复制代码代码如下://-----------用参数方程绘制椭圆---------------------//函数的参数x,y为椭圆中心;a,b分别为椭圆横半轴、...

HTML5 canvas绘制arcTo、translate和rotate的画法探索【图】

??arcTo(x1,y1,x2,y2,radius) ;还要加上moveTo的点(x0,y0);第一步:找到切点过点(x1,y1), (x0,y0)引射线与点(x1,y1),(x2,y2)所引射线交于点(x1,y1),作其角平分线,找到圆心,使其到角的两边距离等于radius,且切于两边为p1,p2,即为两切点。第二步:画线从起点(x0,y0)引线段到切点p1(p1在点(x1,y1)、(x0,y0)所成的射线上),然后切点p1引以radius为半径的圆弧线到切点p2,终止。即最终的线段,肯定起于(x0,y0)点,终于切点p2,过...

Canvas绘制时钟【代码】【图】

准备工作 首先,找一张时钟的图片,就是下面这张了。——来自bigger than bigger的dribbble网站,图片来源(侵删)第一步:创建Canvas标签然后就开始用canvas实现这个逼格满满的时钟吧。在html代码中插入canvas标签<canvas id="canvas" width="400" height="400"></canvas>由于浏览器对HTML5标准支持不一致,所以,通常在<canvas>内部添加一些说明性HTML代码,如果浏览器支持Canvas,它将忽略<canvas>内部的HTML,如果浏览器不支持...

canvas绘制文字

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>初学html5</title> <meta name="keywords" content=""> <meta name="description" content=""> <script src="canvas2.js"></script> <style> *{margin:0;padding:0;}</style></head> <body onload="draw(‘canvas‘);"> <canvas id="canvas" width="400" height="300"></canvas></body> </html> function draw(id){ var canvas=document.getElementByI...

js画布组件(<canvas></canvas>)【代码】

什么是 Canvas?HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域,您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。创建 Canvas 元素向 HTML5 页面添加 canvas 元素。规定元素的 id、宽度和高度:<canvas id="myCanvas" width="200" height="100"></canvas>通过 JavaScript 来绘制canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:<...

HTML5 canvas之一:canvas element【代码】

<!DOCTYPE HTML><html><head><style>body {margin: 0px;padding: 0px;}</style></head><body><canvas id="myCanvas" width="578" height="200"></canvas><script>var canvas = document.getElementById(‘myCanvas‘);var context = canvas.getContext(‘2d‘);// do cool things with the context context.font =‘40pt Calibri‘;context.fillStyle =‘blue‘;context.fillText(‘Hello World!‘, 150, 100);</script></bod...

PlayCanvas_0002:背景透明 加背景图【图】

1,背景透明效果alpha 设为 true 去掉天空盒 后设置为一个没有的天空盒文件 模型如果需要天光就在材质里加 设置body的透明样式 原文:https://www.cnblogs.com/eliteboy/p/14377235.html

HTML之canvas 8 绘制阴影-绘制文字【代码】

绘制阴影Context.shadowOffetX:阴影横向位移量Context.shadowOffetY:阴影纵向位移量Context.shadowColor:阴影颜色Context.shadowBlur阴影的模糊范围 绘制文字 Context.fillStyle=’#00F’; Context.font=”bold 30px sans-serif”; Context.fillText(“hello world”,0,0); Context.strokeText(“hello world”,0,0); Var metrics=context.measureText(text);<html><head><meta charset="UTF-8"><title>绘制阴影-绘制文字</title><...

16-canvas绘制圆弧【代码】

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<title>16-Canvas绘制圆弧</title> 6<style> 7 *{ 8 margin: 0; 9 padding: 0;10}11 canvas{12 display: block;13 margin: 0 auto;14 background: red;15}16</style>17</head>18<body>19<canvas width="500" height="400"></canvas>20<script>21/*22 1.基本概念 23 角度: 一个圆...

canvas渐变【代码】【图】

代码: 1/**2 * Created by Administrator on 2016/1/29.3*/ 4function draw(id){5var canvas = document.getElementById(id);6var context = canvas.getContext("2d");7// var grd = context.createLinearGradient(0,0,300,0); 8var grd = context.createRadialGradient(50,50,0,100,100,90);9 grd.addColorStop(0,"#ff0000"); 10 grd.addColorStop(0.5,"#ff6100"); 11 grd.addColorStop(1,"#0000ff"); 12 con...