HTML5读书笔记之四：Canvas高级功能
浏览数：39 /
时间：2015年06月09日
<!DOCTYPE html>
<html>
<head>
<title>CanvasTest2</title>
<meta charset="utf-8">
<link href="./css/canvas.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="./jquery/jquery-1.11.1.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
var canvas = $("#myCanvas");
var context = canvas.get(0).getContext("2d");
/************************************保存和恢复绘图状态**************************************************************************************
context.fillStyle = "rgb(255, 0, 0)"; //绘制风格
context.save(); //保存画布状态
context.fillRect(50, 50, 100, 100);
context.fillStyle = "rgb(0, 0, 255)";
context.save();
context.fillRect(200, 50, 100, 100);
context.restore(); //恢复画布状态
context.fillRect(350, 50, 100, 100);
context.restore();
context.fillRect(50, 200, 100, 100);
***************************************变形--平移********************************************************************************************
context.fillRect(50, 50, 100, 100);
context.translate(150, 150); //将原点从一个位置移到另一个位置
context.fillStyle="rgb(255, 0, 0)";
context.fillRect(50, 50, 100, 100);
***************************************变形--缩放********************************************************************************************
context.save(); //保存画布状态
context.translate(150, 150);
context.scale(2, 2); //进行缩放部分
context.fillRect(0, 0, 100, 100);
context.restore(); //恢复画布状态
context.fillRect(0, 0, 100, 100); //不进行缩放部分
***************************************变形--旋转********************************************************************************************
context.translate(200, 200); //将要旋转的正方形的圆心平移
context.rotate(0.7854); //旋转45度角
context.fillRect(-50, -50, 100, 100); //绘制正方形
***************************************变形--变换矩阵****************************************************************************************
context.setTransform(1, 0, 0, 1, 0, 0); //单位矩阵
var xScale = Math.cos(0.7854); //x轴缩放
var ySkew = -Math.sin(0.7854); //y轴倾斜
var xSkew = Math.sin(0.7854); //x轴倾斜
var yScale = Math.cos(0.7854); //y轴缩放
var xTrans = 200; //x轴平移
var yTrans = 200; //y轴平移
context.transform(xScale, ySkew, xSkew, yScale, xTrans, yTrans);
context.fillRect(-50, -50, 100, 100);
***************************************合成--全局阿尔法值************************************************************************************
context.fillStyle = "rgb(63, 169, 245)";
context.fillRect(50, 50, 100, 100);
context.globalAlpha = 0.5; //0.5是与globalAlpha匹配的全局阿尔法值，再次使用fillStyle时（带有一个0.5的全局阿尔法值）会使全局阿尔法值
context.fillStyle = "rgb(255, 123, 172)"; //，0.5*0.5=0.25
context.fillRect(100, 100, 100, 100);
context.globalAlpha = 0.25;
context.fillStyle = "rgb(255, 123, 172)";
context.fillRect(150, 150, 100, 100);
***************************************合成--合成操作*****************************************************************************************
context.fillStyle = "rgb(63, 169, 245)";
context.fillRect(50, 50, 100, 100);
context.globalCompositeOperation = "source-over"; //默认值，表示绘制的图形（源）将画在现有的画布（目标）之上
context.fillStyle = "rgb(255, 123, 172)";
context.fillRect(100 ,100, 100, 100);
/*
globalCompositeOperation支持11种属性：1.source-over 默认值，表示绘制的图形（源）将画在现有的画布（目标）之上
2.destination-over 与source-over相反，将目标绘制在源之上
3.source-atop ..不一一解释了，上网搜索，看合成效果会有更直观的印象
4.destination-atop 5.source-in 6.destination-in 7.source-out 8.destination-out
9.lighter 10.copy 11.xor
*/
/***************************************合成--阴影********************************************************************************************
//阴影效果可通过4个属性值来进行操作，shadowBlur（像素模糊值，默认0），shadowOffsetX（默认0），shadowOffsetY（默认0），shadowColor（默认设置为透明黑）
/*例1
context.shadowBlur = 20;
context.shadowColor = "rgb(0, 0, 0)";
context.fillRect(50, 50, 100, 100);
*/
/*例2
context.shadowBlur = 0;
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowColor = "rgba(100, 100, 100, 0.5)"; //透明灰
context.fillRect(200, 50, 100, 100);
*/
/*例3
context.shadowColor = "rgb(255, 255, 0)"; //金黄
context.shadowBlur = 20;
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.beginPath();
context.arc(400, 100, 50, 0, Math.PI*2, false);
context.fill();
*/
/***************************************合成--渐变********************************************************************************************
//线性渐变createLinearGradient,放射性渐变createRadialGradient
/*例1
var gradient = context.createLinearGradient(0, 0, 0, canvas.height());
gradient.addColorStop(0, "rgb(0, 0, 0)");
gradient.addColorStop(1, "rgb(255, 255, 255)");
context.fillStyle = gradient;
context.fillRect(0, 0, canvas.width(), canvas.height());
*/
/*例2
createRadialGradient(x0, y0, r0, x1, y1, r1) 两个圆之间存在渐变的关系
var gradient = context.createRadialGradient(300, 300, 10, 100, 100, 50);
gradient.addColorStop(0, "rgb(0, 0, 0)");
gradient.addColorStop(1, "rgb(150, 150, 150)");
context.fillStyle = gradient;
context.fillRect(0, 0, canvas.width(), canvas.height());
*/
/*例3
var canvasCentreX = canvas.width()/2;
var canvasCentreY = canvas.width()/2;
var gradient = context.createRadialGradient(canvasCentreX, canvasCentreY, 0, canvasCentreX, canvasCentreY, 250);
gradient.addColorStop(0, "rgb(0, 0, 0)");
gradient.addColorStop(1, "rgb(150, 150, 150)");
context.fillStyle = gradient;
context.fillRect(0, 0, canvas.width(), canvas.height());
*/
/***************************************合成--复杂路径*****************************************************************************************
/*例1
//创建一个三角形
context.beginPath();
context.moveTo(100, 50); //将原点移动到指定点,创建一个全新的子路径
context.lineTo(150, 150);
context.lineTo(50, 150);
context.closePath();
context.stroke();
context.fill();
*/
/*例2
//二次贝塞尔曲线
context.lineWidth = 5;
context.beginPath();
context.moveTo(50, 250);
context.quadraticCurveTo(250, 100, 450, 250);
context.stroke();
*/
/*例3
//三次贝塞尔曲线
context.lineWidth = 5;
context.beginPath();
context.moveTo(50, 250);
context.bezierCurveTo(150, 50, 350, 450, 450, 250); //参数含义自行百度吧
context.stroke();
*/
/***************************************将画布导出为图像*****************************************************************************************/
context.save();
context.fillRect(50, 50, 100, 100);
context.fillStyle = "rgb(255, 0, 0)";
context.fillRect(100, 100, 100, 100);
context.restore();
context.fillRect(150, 150, 100, 100);
var dataURL = canvas.get(0).toDataURL();
var url = $("#url");
url.html(dataURL);
var img = $("<img></img>");
img.attr("src", dataURL);
canvas.replaceWith(img);
});
</script>
</head>
<body>
<canvas id="myCanvas" width="1000" height="1000">
</canvas>
<p id="url"></p>
</body>
</html>郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
