Canvas基础知识与图片绘制

Canvas

html5 canvas 元素用于图形绘制标签 ,通过脚本语言进行完成绘制(JavaScript)

canvas 拥有默认的宽高 300px,150px

<canvas width="500" height="500" style="border: 1px solid black;"></canvas>

border: 边框的宽度 线的种类 边框的颜色

//获取画板标签
var can = document.getElementById("myCanvas");
//获取当前画板的画笔对象
var ctx = can.getContext("2d");
//设置当前画笔的颜色
ctx.fillStyle="red"；
//通过画笔对象绘制一个矩形 fillRect(x,y,w,h)
ctx.fillRect(0,0,100,100);

绘制路径

//绘制路径
//1.确认画笔的起始位置(x,y)--落笔
ctx.moveTo(50,150);
//2.画笔结束坐标的位置(x,y)--停笔
ctx.lineTo(300,150);
//3.绘制 -- 1)路径被填充2)只绘制路径
ctx.strokeStyle = "aqua";
ctx.stroke();

//绘制圆形
ctx.moveTo(400,400);
ctx.arc(400,400,50,0,2*Math.PI);
// ctx.stroke();
ctx.fill();

Canvas 图片绘制
1.创建图片对象

var 变量名称 = new Image();

2.设置图片路径

变量名称.src = “路径地址”；

3.当浏览器将图片加载完成后，在进行绘制图片

变量名称.onload = function(){

​ 绘制图片

}

ctx.drawImage(img,x,y);

图片对象 , 绘制x，绘制y

ctx.drawImage(img,x,y,w,h);

图片对象 , 绘制x，绘制y，宽，高

ctx.drawImage(img,ix,iy,iw,ih,x,y,w,h);

图片对象 ,图片x,图片y,图片宽，图片高，绘制x，绘制y，宽，高