画布
最近学习h5的画布，感觉很有意思，我们一起来分享一下吧
什么是 Canvas？
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
创建 Canvas 元素
向 HTML5 页面添加 canvas 元素。
规定元素的 id、宽度和高度：
<canvas id="myCanvas" width="200" height="100"></canvas>
调用 canvas 对象的 getContext 方法
这个方法目前只能传入参数 "2d"，不久的将来他可能会支持参数 "3d"，你一定明白那意味着什么，让我们期待吧。
var canvas = document.getElementById('first');
var ctx = canvas.getContext('2d');
fill（）
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 fill() 方法。
注释：Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。
canvas元素绘制图像的时候有两种方法，分别是
context.fill()//填充
context.stroke()//绘制边框
style:在进行图形绘制前，要设置好绘图的样式
context.fillStyle//填充的样式
context.strokeStyle//边框样式
利用画布绘制矩形
var canvas1=document.getElementById("first");
var cxt=canvas1.getContext("2d")
cxt.fillStyle="red"
cxt.fillRect(0,0,100,100)
画一个圆出来、
context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
这一共有 6 个参数. x 是圆心的横坐标, y 是圆心的纵坐标, radius 是半径, startAngle 是开始画圆的角度, endAngle 是结束画圆的角度, anticlockwise 是画圆方向.
弧长 Math.PI是半圆 Math.PI*2是整个圆 0.5为四分之一
var canvas = document.getElementById('first');
var ctx=canvas.getContext("2d")
ctx.fillStyle="red"
// ctx.beginPath();
ctx.arc(100,100,30,Math.PI * -1 / 4, Math.PI * 3 / 4,true);
// ctx.closePath();
ctx.fill();
100,100,30,0,Math.PI*2,true
圆弧中心的坐标x和坐标y、圆弧半径、起始角度、终止角度、是否逆时针。
需要解释的是，第4个和第5个参数需要传入的是圆弧的弧度，如要画30度的角，需要将其转化成弧度30*Math.PI/180；第6个参数用来控制圆弧是顺时针旋转还是逆时针旋转。
var canvas1=document.getElementById("first");
var cxt=canvas1.getContext("2d")
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(100,100,30,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
画个圆
var canvas1=document.getElementById("first");
var cxt=canvas1.getContext("2d")
cxt.fillStyle="red"
cxt.arc(100,100,50,0,45*Math.PI/180,true)//false----顺时针绘画 //true 逆时针绘画
cxt.fill();
绘制矩形2：注意两者的区别，一个是填充的一个是绘制边框
var canvas1=document.getElementById("first");
var cxt=canvas1.getContext("2d")
cxt.strokeStyle="#0000ff";
cxt.strokeRect(20,20,150,100);
绘制一个圆出来
var canvas1=document.getElementById("first");
var cxt=canvas1.getContext("2d")
cxt.beginPath();
cxt.arc(100,100,30,0,Math.PI*2,true);
cxt.closePath();
cxt.strokeStyle = 'red';
//cxt.lineWidth = 10;
cxt.stroke();
案例1：得到画布中的坐标
<canvas id="first" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="go(event)" onmouseout="out()">
你的浏览器不支持 Canvas 标签
</canvas>
<div id="show"></div>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//var show=document.getElementById("show");
document.getElementById("show").innerHTML='ds'
function go(e){
var x=e.clientX;
var y=e.clientY;
document.getElementById("show").innerHTML=x+" "+y;
}
function out(){
show.innerHTML="";
}
</script>
案例2，点击按键，画一条之间出来
<canvas id="myCanvas">
你的浏览器不支持 Canvas 标签
</canvas>
<button onClick="fun()">click me</button>
<script type="text/javascript">
function fun(){
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.strokeStyle = "#ccc";
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.stroke();
}
</script>
那怎么画一个折线呢
cxt.lineTo(300,20);
cxt.stroke();
想想怎么避免这种情况
var canvas1=document.getElementById("first");
var cxt=canvas1.getContext("2d")
cxt.strokeStyle="red";
cxt.beginPath();
cxt.moveTo(10,10);
cxt.lineTo(150,150)
cxt.stroke()
cxt.closePath()
cxt.beginPath();
cxt.moveTo(10,10);
cxt.lineTo(150,250)
cxt.stroke()
cxt.closePath()
线性渐变:
context.createLinearGradient(x0,y0,x1,y1)
介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
gradient.addColorStop("0","magenta");
stop--介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
参数2：在结束位置显示的 CSS 颜色值
：
我们可以使用画布的颜色
解释：
.createLinearGradient(0,0,170,0)
x0 渐变开始点的 x 坐标
y0 渐变开始点的 y 坐标
x1 渐变结束点的 x 坐标
y1 渐变结束点的 y 坐标
案例：
定义一个渐变（从上到下）作为矩形的填充样式：
var c=document.getElementById("first");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(0,0,150,100);
案例2：
定义一个从黑到红再到白的渐变，作为矩形的填充样式：
var c=document.getElementById("first");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
stop 介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
color 在结束位置显示的 CSS 颜色值
gradient.addColorStop("0.5","blue");
案例：
通过多个 addColorStop() 方法来定义渐变：
var c=document.getElementById("first");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop("0.3","magenta");
grd.addColorStop("0.5","blue");
grd.addColorStop("0.6","green");
grd.addColorStop("0.8","yellow");
grd.addColorStop(1,"red");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
案例
var c=document.getElementById("first");
var ctx=c.getContext("2d");
ctx.font="30px Verdana";
// 创建渐变
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// 用渐变进行填充
ctx.strokeStyle=gradient;
ctx.strokeText("hello world!",10,50);
高级：
scale()缩放
看看这段代码有什么用处
<canvas id="first">
你的浏览器不支持 Canvas 标签
</canvas>
var c=document.getElementById("first");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15); ctx.scale(2,2);
ctx.strokeRect(5,5,25,15); ctx.scale(2,2);
ctx.strokeRect(5,5,25,15); ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
context.scale(scalewidth,scaleheight);
scalewidth 缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推)
scaleheight 缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, etc.)
rotate——旋转
语法：
context.rotate(angle);
ngle
旋转角度，以弧度计。
如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算。
举例：如需旋转 5 度，可规定下面的公式：5*Math.PI/180。
案例：
——————————————————————
弧度 度数
转5度
包括圆形
context.rotate(5); 错误 不能直接使用度数
度数----弧度
Math.PI=180
Math.PI/180 ===1弧度
5*Math.PI/180===5弧度
——————————————————————
不能直接使用度数
将矩形旋转 20 度：
var c=document.getElementById("first");
var ctx=c.getContext("2d");
ctx.rotate(20*Math.PI/180);
ctx.fillRect(50,20,100,50);
translate()平移
context.translate(x,y)
x-添加到水平x上的值
y-添加到水平y上的值
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(10,10,100,50);
ctx.translate(70,70);
ctx.fillRect(10,10,100,50);
save()的意思是保存之前的状态，restore()之后就回到你save的那个时候的状态
var canvas1=document.getElementsByTagName("canvas")[0];
var ctx=canvas1.getContext("2d")
ctx.save();
ctx.beginPath();
ctx.rotate(30*Math.PI/180);
ctx.fillRect(50,20,100,50);
ctx.closePath();
ctx.beginPath();
ctx.restore();
ctx.fillRect(60,70,100,50);
ctx.closePath();
transform替换绘图的当前转换矩阵
绘制一个矩形；
通过 transform() 添加一个新的变换矩阵，再次绘制矩形；添加一个新的变换矩阵，然后再次绘制矩形。请注意，每当您调用 transform() 时，它都会在前一个变换矩阵上构建：
ctx.transform(1,0.5,-0.5,1,30,10);
a 水平缩放绘图
b 水平倾斜绘图
c 垂直倾斜绘图
d 垂直缩放绘图
e 水平移动绘图
f 垂直移动绘图
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);
setTransform
绘制一个矩形，通过 setTransform() 重置并创建新的变换矩阵，再次绘制矩形，重置并创建新的变换矩阵，然后再次绘制矩形。请注意，每当您调用 setTransform() 时，它都会重置前一个变换矩阵然后构建新的矩阵，因此在下面的例子中，不会显示红色矩形，因为它在蓝色矩形下面：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)
ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);
ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);
canvas font 属性
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="40px Arial";
ctx.fillText("Hello World",130,150);
context.fillText(text,x,y,maxWidth);
text 规定在画布上输出的文本。
x 开始绘制文本的 x 坐标位置（相对于画布）。
y 开始绘制文本的 y 坐标位置（相对于画布）。
渐变色创建文字
var canvas1=document.getElementById("first");
var ctx=canvas1.getContext("2d")
ctx.font="30px Verdana";
var gradient=ctx.createLinearGradient(0,0,180,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
ctx.fillStyle=gradient;
ctx.fillText("w3school.com.cn",10,90);
canvas textAlign 属性
extAlign 属性根据锚点，设置或返回文本内容的当前对齐方式。
通常，文本会从指定位置开始，不过，如果您设置为 textAlign="right" 并将文本放置到位置 150，那么会在位置 150 结束。
start 默认。文本在指定的位置开始。
end 文本在指定的位置结束。
center 文本的中心被放置在指定的位置。
left 文本左对齐。
right 文本右对齐。
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 在位置 150 创建蓝线
ctx.strokeStyle="blue";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
ctx.font="15px Arial";
// 显示不同的 textAlign 值
ctx.textAlign="start";
ctx.fillText("textAlign=start",150,60);
// ctx.textAlign="end";
ctx.fillText("textAlign=end",150,80);
ctx.textAlign="left";
ctx.fillText("textAlign=left",150,100);
ctx.textAlign="center";
ctx.fillText("textAlign=center",150,120);
ctx.textAlign="right";
ctx.fillText("textAlign=right",150,140);
关于图像
var img = new Image(); // Create new Image object
img.src = 'myImage.png'; // Set source path
当脚本执行后，图片开始装载。若调用 drawImage 时，图片没装载完，脚本会等待直至装载完毕。如果不希望这样，可以使用 onload 事件：
var ctx = document.getElementById('myCanvas').getContext('2d');
var img = new Image();
img.src = 'oneeye.jpg';
img.onload = function()
{
ctx.drawImage(img,0,0);
ctx.beginPath();
}
}
x 在画布上放置图像的 x 坐标位置。
y 在画布上放置图像的 y 坐标位置。
ctx.drawImage(img,0,0,200,200);
width 可选。要使用的图像的宽度。（伸展或缩小图像）
height 可选。要使用的图像的高度。（伸展或缩小图像）
var myImage=document.getElementById("myCanvas");
var cxt=myImage.getContext("2d");
var img=new Image();
img.src="ji.png";
img.onload = function()
{
cxt.drawImage(img,0,0,50,50);
cxt.drawImage(img,30,30,50,50);
cxt.drawImage(img,60,60,50,50);
}
简单的使用
<canvas id="myCanvas" style="width: 1000px; height: 600px;border: 1px solid #c3c3c3"></canvas>
<script type="text/javascript">
var myImage=document.getElementById("myCanvas");
var cxt=myImage.getContext("2d");
var img=new Image();
img.src="1.jpg";
img.onload = function()
{
cxt.drawImage(img,0,0,200,90);
cxt.drawImage(img,60,30,200,90);
cxt.drawImage(img,90,60,200,90);
}
</script>
这样做呢？
cxt.drawImage(img,0,0,200,90);
cxt.drawImage(img,60,30,100,45);
cxt.drawImage(img,90,60,800,200);
图像的剪贴
var canvas1=document.getElementById("myCanvas")
var ctx=canvas1.getContext("2d");
var img=new Image();
img.src='wode.gif'
img.onload=function(){
ctx.drawImage(img,10,10,30,30,50,50,100,100);
}
img 规定要使用的图像、画布或视频。
sx 可选。开始剪切的 x 坐标位置。
sy 可选。开始剪切的 y 坐标位置。
swidth 可选。被剪切图像的宽度。
sheight 可选。被剪切图像的高度。
x 在画布上放置图像的 x 坐标位置。
y 在画布上放置图像的 y 坐标位置。
width 可选。要使用的图像的宽度。（伸展或缩小图像）
height 可选。要使用的图像的高度。（伸展或缩小图像）
画布里面的东西还有很多要学习呢，大家一起努力吧
浙公网安备 33010602011771号