随笔 - 43&
评论 - 1093&
&&&&&&&&&&&
　　最近做项目为了解决全局异常信息记录，研究了一下浏览器全屏截图功能，方便用户发现异常时能够快速截图发给管理员。最终记录的异常信息如下，上面的【截图报告管理员】就是使用前端插件实现的。
html2canvas介绍
& &&以前我们只能通过其他的截图工具来截取图像。现代浏览器的功能已经越来越强，随着H5的逐渐普及，浏览器本身就可以截图啦。html2canvas就是这样一款前端插件,它的原理是将Dom节点在Canvas里边画出来。虽然很方便，但有以下限制：
不支持iframe
不支持跨域图片
不能在浏览器插件中使用
部分浏览器上不支持SVG图片
不支持Flash
不支持古代浏览器和IE，如果你想确认是否支持某个浏览器，可以用它访问&&试试 :)
& & &由于我的使用场景很简单,记录一下异常信息，并且异常页面也是由自己定义的，那么html2canvas 就足够使用了。
& &引用jquery,html2canvas即可，使用代码也很简单。我这里使用的是&html2canvas 0.5.0 版本
html2canvas($("#tbl_exception"), {
onrendered: function (canvas) {
var url = canvas.toDataURL();
//以下代码为下载此图片功能
var triggerDownload = $("&a&").attr("href", url).attr("download", getNowFormatDate()+"异常信息.png").appendTo("body");
triggerDownload[0].click();
triggerDownload.remove();
　&第一个参数是要截图的Dom对象，第二个参数时渲染完成后回调的canvas对象。
NameTypeDefaultDescription
allowTaint
Whether to allow cross-origin images to taint the canvas
background
Canvas background color, if none is specified in DOM. Set undefined for transparent
Define the heigt of the canvas in pixels. If null, renders with full height of the window.
letterRendering
Whether to render each letter seperately. Necessary ifletter-spacing&is used.
Whether to log events in the console.
Url to the proxy which is to be used for loading cross-origin images. If left empty, cross-origin images won't be loaded.
Whether to test each image if it taints the canvas before drawing them
Timeout for loading images, in milliseconds. Setting it to 0 will result in no timeout.
Define the width of the canvas in pixels. If null, renders with full width of the window.
Whether to attempt to load cross-origin images as CORS served, before reverting back to proxy
　　介绍完使用之后，说说自己使用中遇到的问题，截图只能截取当前屏幕内的内容。在查看插件源码，进行调试之后找到了解决方案。下面贴出源码和修改后的代码
return renderDocument(node.ownerDocument, options, node.ownerDocument.defaultView.innerWidth, node.ownerDocument.defaultView.innerHeight, index).then(function(canvas) {
if (typeof(options.onrendered) === "function") {
log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");
options.onrendered(canvas);
修改代码：
//修改源码,解决BUG 对于部分不能截屏不能全屏添加自定义宽高的参数以支持
var width = options.width != null ? options.width : node.ownerDocument.defaultView.innerW
var height = options.height != null ? options.height : node.ownerDocument.defaultView.innerH
return renderDocument(node.ownerDocument, options, width, height, index).then(function (canvas) {
if (typeof(options.onrendered) === "function") {
log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");
options.onrendered(canvas);
&主要是让用户调用时能够自定义需要截取Dom对象的宽和高，现在调用方式如下
$("#btn_screen").on("click", function () {
html2canvas($("#tbl_exception"), {
height: $("#tbl_exception").outerHeight() + 20,
onrendered: function (canvas) {
var url = canvas.toDataURL();
//以下代码为下载此图片功能
var triggerDownload = $("&a&").attr("href", url).attr("download", getNowFormatDate()+"异常信息.png").appendTo("body");
triggerDownload[0].click();
triggerDownload.remove();
　　通过前端插件即实现了浏览器全屏截图功能,不得不说H5功能越来越强大，下面将介绍mvc中的全局异常记录实现。
因为，我的写作热情也离不开您的肯定支持。
感谢您的阅读，如果您对我的博客所讲述的内容有兴趣，请继续关注我的后续博客，我是焰尾迭 。
阅读(...) 评论()
欢迎资助我持续写作，金额随意,欢迎来赏！天空飘来五个字：前端那些事儿
其实canvas真的很简单，复杂的部分其实是你的创意
江湖上流传开来的除了牛叉的"H5"，还有牛叉的canvas应用。
canvas是html5的一部分，当然他们说的H5也并不是html5的意思，只是表示在手机浏览器中，更侠义的是在微信浏览器中打开的酷炫的网页。
曾几何时，我也觉得canvas真的酷爆了，各种什么烟花、酷炫的动画效果、canvas游戏等，都燃烧着我学习的热情。
后来通过学习，多看书，其实canvas并不复杂，要用到的东西也不多。
大概整理一下：
1、绘制基本几何图形
ctx.moveTo(100,200);
ctx.lineTo(120,300);
ctx.lineWidth = 10;
ctx.strokeStyle = '#000';
ctx.stroke();
ctx.fillRect(0,0,100,100);
ctx.arc(200,200,100,0,Math.PI*(1/2),false);
//x,y,半径，起始角度，结束角度，是否逆时针方向
ctx.stroke();
（4）三角形（用直线来连接实现）
ctx.moveTo(400,200);
ctx.lineTo(350,260);
ctx.lineTo(450,260);
ctx.lineTo(400,200);
ctx.lineWidth = 5;
ctx.strokeStyle = 'blue';
ctx.fillStyle = 'orange';
ctx.stroke();
ctx.fill();
ctx.lineWidth = 2;
ctx.strokeStyle = "#f00";
ctx.moveTo(10,10);
ctx.arcTo(210,60,10,210,20);
ctx.stroke();
（6）二次贝塞尔曲线
ctx.lineWidth = 3;
ctx.strokeStyle = 'blue';
ctx.moveTo(100,100);
ctx.quadraticCurveTo(125,225,225,166);
ctx.stroke();
（7）三次贝塞尔曲线
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
以上是基本的几何图像绘制方法，虽然简单，但是只要创意好，利用简单的几何图形来组合成复杂的图像，也是很棒的撒。
2、添加图片
有三种画法，函数方法一样，只是参数不同，更多的参数表示更复杂也更多可控制的东西。
var img = new Image();
img.src = '1.jpg';
img.onload = function(){
//第一种画法
ctx.drawImage(img,0,0);
//第二种画法,5 args
ctx.drawImage(img,330,0,200,300);
//第三种画法，9 args
ctx.drawImage(img,0,0,320,384,330,320,160,192);
3、绘制文字
ctx.font="20px Georgia";
ctx.fillText("Hello World!",10,50);除了使用fillText还可以strokeText，可同时使用之前绘制图形的一些常用方法，比如strokeStyle等。
4、转换（缩放，位移，旋转）
例子：旋转一个矩形
var mycanvas = document.getElementById('mycanvas'),
ctx = mycanvas.getContext('2d'),
cw = mycanvas.width,
ch = mycanvas.height,
degree = 0;
setInterval(function(){
ctx.clearRect(0,0,cw,ch);
ctx.save();
ctx.translate(300,300);
ctx.rotate(Math.PI/180*(degree++));
ctx.fillStyle = '#999';
ctx.fillRect(-rw/2,-rh/2,rw,rh);
ctx.restore();
5、样式、阴影
设置阴影大小、颜色、偏移量
ctx.shadowBlur=20;
ctx.shadowColor="black";
ctx.shadowOffsetX = "10";
ctx.shadowOffsetY = "20";
创建并使用线性渐变：
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
ctx.fillStyle=
ctx.fillRect(20,20,150,100);
创建并使用径向渐变：
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle=
ctx.fillRect(10,10,150,100);使用背景图片，和css一样，可以设置平铺等属性
var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=
ctx.fill();
6、合成方法
所谓的合成方法就是两个图像叠加的时候，使用什么样的处理方式，比如覆盖在上面，覆盖的部分颜色的加深还是减淡等：
写了一个测试demo：
基本上也就上面这些基本方法和属性了，还有一些其他的方法没有列出来，比如lineCap之类的。
在这些基本方法的基础上，你要做出像样点的东西，还是需要自己的计算能力和图形学能力以及创意。
比如数学里面的物理计算知识（物体运动、碰撞检测等）、图形学里面的颜色（反色，像素数据处理等）、创意（游戏）。
动画才是让canvas活色生香起来的动力。
而canvas并没有提供动画的方法，他需要你自己去写动画的过程。
在canvas中，难点其实在于如何运用你所掌握的数学知识、物理知识、美术、创意等东西，叠加在一起创建酷炫的东西。
比如粒子动画、H5页游等，比如星空、烟花、下雪等。
canvas的一些例子：
利用canvas制作最简易的画板
制作一个简单的canvas动画
HTML5 canvas 平铺的几种方法
打造高大上的Canvas粒子动画
canvas简单的粒子效果的实现
原生js彩色星星喷射特效，canvas特效，超简单的原生js
用html5 Canvas制作一个简单的游戏
英雄抓小怪物（上）
canvas简单动画效果
没有更多推荐了，新增的元素，可用于通过使用中的脚本来绘制图形。例如，它可以用于绘制图形，制作照片，创建动画，甚至可以进行实时视频处理或渲染。
Mozilla 程序从 Gecko 1.8 () 开始支持 &canvas&。它首先是由 Apple 引入的，用于 OS X
和 Safari。Internet Explorer 从IE9开始支持&canvas& ，更旧版本的IE可以引入 Google 的
项目中的脚本来获得&canvas&支持。Chrome和Opera 9+ 也支持 &canvas&。
也使用&canvas&元素在网页上绘制硬件加速的3D图形。
这只是一个使用
方法简单的代码片段。
&canvas id="canvas"&&/canvas&
JavaScript
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);
编辑下面的代码，查看画布的变化:
Playable code
&canvas id="canvas" width="400" height="200" class="playable-canvas"&&/canvas&
&div class="playable-buttons"&
&input id="edit" type="button" value="Edit" /&
&input id="reset" type="button" value="Reset" /&
&textarea id="code" class="playable-code"&
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);&/textarea&
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.
function drawCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
eval(textarea.value);
reset.addEventListener("click", function() {
textarea.value =
drawCanvas();
edit.addEventListener("click", function() {
textarea.focus();
textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
与 WebGLRenderingContext 有关的接口请参考 。
也与之相关。
教程与指导
包括了&canvas&的基本用法与高级功能的综合性教程。
一些面向开发者的 &canvas& 代码片段。
运用canvas制作的光线追踪动画示例。
如何在canvas上绘制DOM内容，如HTML元素。
结合和 来实现实时操作视频数据。
具有SVG解析功能的开源canvas库
专注于桌面与移动应用中的交互操作的开源canvas库
运行于HTML5 Canvas上的开源矢量图形脚本框架
开源的轻量的canvas库
强大轻量的canvas框架
用于处理可视化语言
一个开源的游戏引擎
一个开源的游戏引擎
关键帧动画库
用于数据可视化，创意编程和游戏开发的WebGL框架
创建交互式的2D Canvas数据可视化
类Flash API的canvas库
用来创建2d图形的开源库
基于 heatmaps 的 canvas 开源库
Living Standard
文档标签和贡献者
此页面的贡献者：
最后编辑者:
Jan 8, :16 PM
电子邮件地址
我接受 Mozilla 按照所述的方式处理我的信息。
谢谢！请检查您的收件箱以确认您的订阅。
如果您以前未确认过订阅 Mozilla 相关的新闻简报，您可能必须这样做。请检查您的收件箱或垃圾邮件箱并找到我们发给您的电子邮件。
隐藏新闻报注册HTML5 canvas clip() 方法&>&HTML5 Canvas核心技术—源码
HTML5 Canvas核心技术—源码
上传大小：16.86MB
HTML5 Canvas核心技术一书的源码，里面很多非常有用的实例代码，是学习html5游戏开发的好资料。html前途不可限量啊。
综合评分：5
{%username%}回复{%com_username%}{%time%}\
/*点击出现回复框*/
$(".respond_btn").on("click", function (e) {
$(this).parents(".rightLi").children(".respond_box").show();
e.stopPropagation();
$(".cancel_res").on("click", function (e) {
$(this).parents(".res_b").siblings(".res_area").val("");
$(this).parents(".respond_box").hide();
e.stopPropagation();
/*删除评论*/
$(".del_comment_c").on("click", function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_invalid/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parents(".conLi").remove();
alert(data.msg);
$(".res_btn").click(function (e) {
var parentWrap = $(this).parents(".respond_box"),
q = parentWrap.find(".form1").serializeArray(),
resStr = $.trim(parentWrap.find(".res_area_r").val());
console.log(q);
//var res_area_r = $.trim($(".res_area_r").val());
if (resStr == '') {
$(".res_text").css({color: "red"});
$.post("/index.php/comment/do_comment_reply/", q,
function (data) {
if (data.succ == 1) {
var $target,
evt = e || window.
$target = $(evt.target || evt.srcElement);
var $dd = $target.parents('dd');
var $wrapReply = $dd.find('.respond_box');
console.log($wrapReply);
//var mess = $(".res_area_r").val();
var mess = resS
var str = str.replace(/{%header%}/g, data.header)
.replace(/{%href%}/g, 'http://' + window.location.host + '/user/' + data.username)
.replace(/{%username%}/g, data.username)
.replace(/{%com_username%}/g, data.com_username)
.replace(/{%time%}/g, data.time)
.replace(/{%id%}/g, data.id)
.replace(/{%mess%}/g, mess);
$dd.after(str);
$(".respond_box").hide();
$(".res_area_r").val("");
$(".res_area").val("");
$wrapReply.hide();
alert(data.msg);
}, "json");
/*删除回复*/
$(".rightLi").on("click", '.del_comment_r', function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_comment_del/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parent().parent().parent().parent().parent().remove();
$(e.target).parents('.res_list').remove()
alert(data.msg);
//填充回复
function KeyP(v) {
var parentWrap = $(v).parents(".respond_box");
parentWrap.find(".res_area_r").val($.trim(parentWrap.find(".res_area").val()));
评论共有6条
很不错，配合书一起学习很方便。值得下载
不错，跟实例demo一起看比较好
对canvas讲的很全，谢谢分享
综合评分：
积分/C币：5
综合评分：
积分/C币：6
综合评分：
积分/C币：5
综合评分：
积分/C币：5
VIP会员动态
CSDN下载频道资源及相关规则调整公告V11.10
下载频道用户反馈专区
下载频道积分规则调整V1710.18
spring mvc+mybatis+mysql+maven+bootstrap 整合实现增删查改简单实例.zip
资源所需积分/C币
当前拥有积分
当前拥有C币
输入下载码
为了良好体验，不建议使用迅雷下载
HTML5 Canvas核心技术—源码
会员到期时间：
剩余下载个数：
剩余积分：0
为了良好体验，不建议使用迅雷下载
积分不足！
资源所需积分/C币
当前拥有积分
您可以选择
程序员的必选
绿色安全资源
资源所需积分/C币
当前拥有积分
当前拥有C币
为了良好体验，不建议使用迅雷下载
资源所需积分/C币
当前拥有积分
当前拥有C币
为了良好体验，不建议使用迅雷下载
资源所需积分/C币
当前拥有积分
当前拥有C币
您的积分不足，将扣除 10 C币
为了良好体验，不建议使用迅雷下载
无法举报自己的资源
你当前的下载分为234。
你还不是VIP会员
开通VIP会员权限，免积分下载
你下载资源过于频繁，请输入验证码
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
若举报审核通过，可返还被扣除的积分
被举报人：
请选择类型
资源无法下载 （ 404页面、下载失败、资源本身问题）
资源无法使用 （文件损坏、内容缺失、题文不符）
侵犯版权资源 （侵犯公司或个人版权）
虚假资源 （恶意欺诈、刷分资源）
含色情、危害国家安全内容
含广告、木马病毒资源
*投诉人姓名：
*投诉人联系方式：
*版权证明：
*详细原因：
HTML5 Canvas核心技术—源码}