1、Canvas是什么?
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域,您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
2、创建 Canvas 元素
规定元素的 id、宽度和高度:
<canvas class="canvas" width="200px" height="200px"></canvas>
3、通过 JavaScript 来绘制
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
4、通过JavaScript创建canvas
function createCanvas(){
document.body.innerHTML = ""
mycanvas =document.getElementByIdx("mycanvas");
context = mycanvas.getContext("2d");
}
5、绘制矩形
function drawRect(){
context.fillStyle="#ff0000";
context.translate(100,200);//移动
context.scale(1,0.5);//缩放
context.rotate(30);//旋转
context.fillRect(0,0,200,200);
}
6、绘制图像
function drawImage(){
var img = new Image();
img.onload = function(){
context.drawImage(img,0,0);//三个参数图片源对象、摆放的位置
}
img.src = "img/logo.png"
}
7、使用Canvas绘制直线
function pageLoad(){
var c= $('mycanvas');
var ctx = c.getContext('2d');
ctx.moveTo(20,30);//第一个起点
ctx.lineTo(120,90);//第二个点
ctx.lineTo(220,60);//第三个点(以第二个点为起点)
ctx.lineTo(250,90);//第四个点(以第二个点为起点)
ctx.lineWidth=3;
ctx.strokeStyle = 'blue';
ctx.stroke();//stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。
}
8、绘制渐变曲线
function pageLoad2(){
var can = $('mycanvas');
var cans = can.getContext('2d');
cans.moveTo(0,0);
cans.lineTo(400,300);
var grd = cans.createLinearGradient(0,0,400,300);//线性渐变的起止坐标
grd.addColorStop(0,'red');//创建渐变的开始颜色,0表示偏移量,个人理解为直线上的相对位置,最大为1,一个渐变中可以写任意个渐变颜色
grd.addColorStop(0.5,'green');
grd.addColorStop(1,'yellow');
cans.lineWidth=20;
cans.strokeStyle = grd;
cans.stroke();
}
8、绘制一个线性渐变的矩形
function pageLoad2(){
var can = $('mycanvas');
var cans = can.getContext('2d');
cans.moveTo(0,0);
cans.lineTo(400,300);
var grd = cans.createLinearGradient(0,0,0,100);//线性渐变的起止坐标
grd.addColorStop(0,'red');//创建渐变的开始颜色,0表示偏移量,个人理解为直线上的相对位置,最大为1,一个渐变中可以写任意个渐变颜色
grd.addColorStop(0.5,'green');
grd.addColorStop(1,'yellow');
cans.fillStyle=grd;
cans.fillRect(0,0,200,100);
}