html5画布

画布功能的展示

1.判断浏览器是否支持该功能

//设置画布的id,宽高，背景颜色为红色
<canvas id="first"width="250" height="250" style="background-color:red;">
你的浏览器不支持 Canvas 标签
</canvas>

2.首先获取 canvas 对象，然后调用 canvas 对象的 getContext 方法，这个方法目前只能传入参数 “2d”，不久的将来他可能会支持参数 “3d”，你一定明白那意味着什么，让我们期待吧。

//先获取canva画布，接着再获取它的画笔功能，就可以作画了
var canvas = document.getElementById('first');
var ctx = canvas.getContext('2d');

3.canvas元素绘制图像的时候有两种方法，分别是

1. context.fill()//填充
2. context.stroke()//绘制边框

3. 画一个矩形
   style:在进行图形绘制前，要设置好绘图的样式

   context.fillStyle//填充的样式
   
   context.strokeStyle//边框样式
   

   //利用画布绘制矩形
   var canvas1=document.getElementById(“first”);
   var cxt=canvas1.getContext(“2d”)
   cxt.fillStyle=”red”
   cxt.fillRect(0,0,100,100)

4. 画一个圆
   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个参数用来控制圆弧是顺时针旋转还是逆时针旋转。
   //true表示逆时针，false表示顺时针
   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();

案例1：得到画布中的坐标

你的浏览器不支持 Canvas 标签

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="";
}

案例2，点击按键，画一条直线出来

你的浏览器不支持 Canvas 标签

click me

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();
}

案例三：怎么画一个折线呢

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 颜色值

：
我们可以使用画布的颜色
var canvas1=document.getElementById(“first”);
var cxt=canvas1.getContext(“2d”)
var gradient=cxt.createLinearGradient(0,0,170,0);
gradient.addColorStop(“0”,”magenta”);
gradient.addColorStop(“0.5”,”blue”);
gradient.addColorStop(“1.0”,”red”);

// 用渐变进行填充

cxt.strokeStyle=gradient;
cxt.lineWidth=5;
cxt.strokeRect(0,0,100,100);
解释：
.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 标签

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);

关于图像

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);
}

简单的使用