画布使用"/>
H5的canvas画布使用
H5的canvas
- H5的canvas
- 使用canvas画布
- canvas上绘制图形
- 绘制矩形
- 绘制文字
- 绘制其他不规则图形创建路径
- 绘制矩形
- 绘制圆形
- 绘制弧形
- 绘制直线
- 绘制折线
- 绘制多边形
- canvas给绘制的图形设置样式
- 设置样式
- 设置渐变
- 设置阴影
- 设置线性
- canvas中绘制图像
- 绘制图像
- 平铺图像
- 切割图像
- canvas中的变形
使用canvas画布
定义canvas元素
- 画布的长宽可以通过两种方式设置
- 通过css样式来设置;
- 注意:通过canvas绘制的图像的显示比例会变化;
- 建议:不要使用css方式设置canvas的显示大小;
- 直接通过html中的属性height和width来设置(推荐);
<canvas id="stockGraph" width="150" height="150"></canvas>
- 通过css样式来设置;
- 画布的长宽可以通过两种方式设置
创建画布对象
- 获取 < canvas> 元素,通过 < canvas> 元素,创建画布对象;
- 使用getContext(‘2d’)函数,返回画布对象;
- 利用画布对象进行图形的绘制;
// 获取HTML页面中的< canvas>元素 var canvas = document.getElementById("canvas"); /* 通过< canvas>元素,创建画布对象 使用getContext(type)函数,创建画布对象 * 该函数返回画布对象 * type参数 * 设置当前创建的画布是2d还是3d * 注意 * 参数选项是2d * 必须写成"2d" */ var context = canvas.getContext("2d"); // 利用画布对象,进行绘制图形 context.fillRect(10,10,100,100);
canvas上绘制图形
绘制矩形
- 直接使用矩形方法
- 绘制实心(填充)矩形;
- fillRect(x,y,width,height);
- 参数:
- x和y 绘制矩形的左上角的坐标值;
- width 设置绘制矩形的宽度(单位为px);
- height 设置绘制矩形的高度(单位为px);
- 绘制空心(描边)矩形;
- strokeRect(x,y,width,height);
- 参数:
- x和y 绘制矩形的左上角的坐标值;
- width 设置绘制矩形的宽度(单位为px);
- height 设置绘制矩形的高度(单位为px);
- 清除指定区域的矩形;
- clearRect(x,y,width,height);
- 参数同上;
- 绘制实心(填充)矩形;
绘制文字
- font 设置文字的属性(用法同 CSS 属性 font )。
- textAlign:水平对齐方式。
- left :基准线在左边;
- center :基准线在中间;
- right :基准线在右边;
- textBaseline:垂直对齐方式。
- top :基准线在上边;
- middle :基准线在中间;
- bottom :基准线在下边;
- hanging :悬挂基线;
- alphabetic :字母基线。
- 绘制实心文字
- fillText(text,x,y);
- 绘制空心文字
- strokeText(text,x,y);
var canvas = document.getElementById('mycanvas');var context = canvas.getContext('2d');//绘制基准线context.beginPath();context.moveTo(10,100);context.lineTo(800,100);context.stroke();//绘制基线context.textBaseline = 'bottom';context.fillText('我爱前端',0,100);context.textBaseline = 'top';context.fillText('我爱前端1',50,100);
// textBaseline 属性设置或返回在绘制文本时的当前文本基线。
// alphabetic 默认。文本基线是普通的字母基线。
// top 文本基线是 em 方框的顶端。
// hanging 文本基线是悬挂基线。
// middle 文本基线是 em 方框的正中。
// ideographic 文本基线是表意基线。
// bottom 文本基线是 em 方框的底端。// textAlign 属性根据锚点,设置或返回文本内容的当前对齐方式。
// start 默认。文本在指定的位置开始。
// end 文本在指定的位置结束。
// center 文本的中心被放置在指定的位置。
// left 文本在指定的位置开始。
// right 文本在指定的位置结束。context.beginPath();context.moveTo(150,10);context.lineTo(150,300);context.stroke();context.textAlign = 'center';context.fillText('我爱前端2',150,50);//设置文字样式context.font = 'bold 48px 微软雅黑';context.fillStyle = 'yellow';//写文字context.fillText('天气真好',250,100);
绘制其他不规则图形(创建路径)
绘制矩形
- 1.调用 beginPath() 方法,创建新建一条路径。
- 2.使用 rect(x, y, width, height) 方法,设置矩形的坐标值及宽度和高度。
- x和y 表示矩形的左上角坐标值。
- width和height 表示矩形的宽度和高度。
- 3.通过 fill() 或 stroke() 方法进行绘制。
绘制圆形
1.调用 beginPath() 方法,创建新建一条路径。
2.使用 arc(x, y, radius, startAngle, endAngle, anticlockwise) 方法,设置矩形的坐标值及宽度和高度。
- x和y 表示圆形的圆心坐标值。
- radius 表示圆形的半径。
- startAngle 表示绘制圆形的开始点,值为 0。
- endAngle 表示绘制圆形的结束点,值为 Math.PI*2。
- anticlockwise,表示是以顺时针还是以逆时针方式绘制圆形,Boolean值。(默认值为false,表示顺时针。)
- 3.通过 fill() 或 stroke() 方法进行绘制。
//动态冒泡小球的案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>html,body{margin: 0;}</style>
</head>
<body onload="init()" onresize="init()">
<canvas id="mycanvas"></canvas>
</body>
<script>function init() {//设置画布var canvas = document.getElementById('mycanvas');canvas.width = document.documentElement.clientWidth;canvas.height = document.documentElement.clientHeight;var context = canvas.getContext('2d');var width = canvas.width;var height = canvas.height;//创建小球构造函数function Ball(h) {this.x = Math.random()*(width-20)+10;this.y= h+20;this.red = parseInt(Math.random()*255);this.green = parseInt(Math.random()*255);this.blue = parseInt(Math.random()*255);this.globalAlpha = 1;//定义绘制小球的方法this.paint = function () {context.globalAlpha = this.globalAlpha;context.fillStyle = 'rgb('+this.red+','+this.green+','+this.blue+')';context.beginPath();context.arc(this.x,this.y,20,0,Math.PI*2,true);context.fill();}//定义小球动画方法this.num = Math.random();this.animate = function () {this.y = this.y-this.num;this.globalAlpha = this.globalAlpha - 0.001;}}//定义数组,将创建的小球都放入var balls = [];setInterval(function () {//创建小球对象,并且把创建好的小球都丢入数组中var ball = new Ball(height);balls.push(ball);},10)//设置动画,定时将小球移动,并且调整透明度setInterval(function () {context.clearRect(0,0,width,height);//遍历数组中的小球,每个小球调用两个方法。for(var i=0;i<balls.length;i++){if(balls[i].globalAlpha <= 0){balls.splice(i,1);}balls[i].paint();balls[i].animate();}},10)}
</script>
</html>
绘制弧形
- 类似圆形的绘制方式,只是第五个参数;
- 值得注意的是:
- 如果绘制的是空心弧形的话,在 arc() 方法调用后:
- 如果使用 closePath() 方法的话,绘制的图形会自动将终点和起点连接成线。
- 如果不用 closePath() 方法的话,绘制的图形会呈现开口状。
绘制直线
- 1.调用 beginPath() 方法,创建新建一条路径。
- 2.使用 moveTo(x, y) 方法,设置直线的起点坐标值。
- 3.使用 lineTo(x, y) 方法,设置直线的终点坐标值。
- 4.通过 stroke() 方法进行绘制。
绘制折线
- 1.调用 beginPath() 方法,创建新建一条路径。
- 2.使用 moveTo(x, y) 方法,设置直线的起点坐标值。
- 3.使用 lineTo(x, y) 方法,设置直线的终点坐标值。
- 4.通过 stroke() 方法进行绘制。
绘制多边形
- 1.调用 beginPath() 方法,创建新建一条路径。
- 2.使用 moveTo(x, y) 方法,设置直线的起点坐标值。
- 3.使用 lineTo(x, y) 方法,设置直线的终点坐标值。
- 4.调用 closePath() 方法,闭合当前绘制的路径。
- 5.通过 fill() 或 stroke() 方法进行绘制。
canvas给绘制的图形设置样式
设置样式
- fillStyle:设置填充样式
- strokeStyle:设置描边样式
- globalAlpha:设置透明度(0-1)
- 值得注意的是:
- 一定要先设置样式(颜色),再绘制图形。
- 每次改变样式(颜色),重新设置。
<canvas id="canvas" width="500px" height="500px"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
// a. 设置填充样式
context.fillStyle = "pink";
// b. 绘制实心矩形
context.fillRect(10,10,100,100);
// 设置描边样式
context.strokeStyle = "red";
context.strokeRect(120,10,100,100);
// 设置透明度
context.globalAlpha = 0.5;
context.fillRect(230,10,100,100);
context.fillStyle = "black";
context.globalAlpha = 0.1;
context.fillRect(230,120,100,100);
</script>
设置渐变
线性渐变:
- createLinearGradient(x1,y1,x2,y2)
- 参数:
- x1和y1 基准线的起点坐标值
- x2和y2 基准线的终点坐标值
var c = document.getElementById('mycanvas'); var cxt = c.getContext('2d'); //设置渐变对象 var lg = cxt.createLinearGradient(10,10,300,300); lg.addColorStop(0,'#FF6666'); lg.addColorStop(0.5,'#FFFF00'); lg.addColorStop(1,'#0066CC'); //设置绘制样式 cxt.fillStyle = lg; //绘制图像 cxt.fillRect(10,10,300,300);
射线(扇形)渐变:
- createRadialGradient(x1,y1,r1,x2,y2,r2);
- 参数:
- x1和y1 第一个基准圆的圆心;
- r1 第一个基准圆的半径;
- x2和y2 第二个基准圆的圆心;
- r2 第二个基准圆的半径;
var c = document.getElementById('mycanvas'); var cxt = c.getContext('2d'); // 设置渐变对象 var lg = cxt.createRadialGradient(160,160,80,160,160,150); lg.addColorStop(0,'#FF6666'); lg.addColorStop(0.5,'#FFFF00'); lg.addColorStop(1,'#0066CC'); cxt.fillStyle = lg; cxt.fillRect(10,10,300,300);
设置渐变色
- 通过线性渐变对象的 addColorStop() 方法设置偏移量和颜色
- 设置线性渐变的颜色和位置
- position - 设置颜色的位置
- 值的范围为 0 - 1,color - 设置颜色
//设置文字样式 context.font = 'bold 48px 微软雅黑'; context.fillStyle = 'yellow'; //设置阴影 context.shadowColor = 'red'; context.shadowBlur = 5;//模糊度 context.shadowOffsetX = -10; context.shadowOffsetY = 10; //写文字 context.fillText('天气真好',250,100);
- 通过线性渐变对象的 addColorStop() 方法设置偏移量和颜色
设置阴影
- shadowColor 设置阴影颜色。
- shadowOffsetX 设置水平方向阴影。
- shadowOffsetY 设置垂直方向阴影。
- shadowBlur 设置阴影程度。
设置线性
- 设置线宽
- lineWidth :指定线条粗细,默认值是1.0。
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100, 150);
context.lineTo(450, 50);
context.lineWidth = 15;
context.stroke();
</script>
设置端点形状
- lineCap :指定线条端点形状。
- butt:默认,向线条的每个末端添加平直的边缘。
- round:向线条的每个末端添加圆形线帽。
- square:向线条的每个末端添加正方向线帽。
- round 和 square 会使线条略变微长。
- lineCap :指定线条端点形状。
设置交点形状
- lineJoin :指定两条线之间的连接点形状。
- round:创建圆角。
- bevel:创建斜角
- miter:默认,创建尖角
- lineJoin :指定两条线之间的连接点形状。
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// set line width for all lines
context.lineWidth = 25;
// miter line join (left)
context.beginPath();
context.moveTo(99, 150);
context.lineTo(149, 50);
context.lineTo(199, 150);
context.lineJoin = 'miter';
context.stroke();
// round line join (middle)
context.beginPath();
context.moveTo(239, 150);
context.lineTo(289, 50);
context.lineTo(339, 150);
context.lineJoin = 'round';
context.stroke();
// bevel line join (right)
context.beginPath();
context.moveTo(379, 150);
context.lineTo(429, 50);
context.lineTo(479, 150);
context.lineJoin = 'bevel';
context.stroke();
</script>
canvas中绘制图像
获取图像几种方法:
- 使用相同页面中的图片;
- 使用相同页面中的其他canvas元素;
- 可以脚本通过Image()构造函数创建图像;
//引入一张外部图片 var img = new Image(); img.src = 'img/dahuangmao-05.png';
绘制图像
绘制图像:使用drawImage()方法绘制图像
drawImage(image, x, y,width,height)
参数:其中 image 是上面获取并创建的image对象,x 和 y 是图片在目标 canvas 里准备放置的起始坐标,width和height是设置的绘制图像的宽度和高度。
context.strokeRect(0,0,128,128);
注意:若在绘制图像时图片还没加载完成,那什么都不会发生(在一些旧的浏览器中可能会抛出异常)。因此应该用load时间来保证不会在加载完毕之前使用这个图片。
img.onload = function () { //绘制图片 //四个参数代表:引入图片的资源,图片放置的初始水平位置,图片放置的垂直位置,图片的宽度,图片的高度 context.drawImage(img,0,0,128,128);}
平铺图像
平铺图像:将图片按照一定比例重复铺满整个规定区域;
- 1.引入图片并创建图片对象;
- 2.使用createPattern(),创建一个模式对象,来规定图片平铺模式;
- 平铺方式(type):
- no-repeat :不平铺;
- repeat-x :水平方向平铺;
- repeat-y :垂直方向平铺;
- repeat :全方向平铺;
- 平铺方式(type):
- 3.将该模式对象设置成绘制图像的样式;
- 4.进行图像绘制;
//1、引入图片并创建图片对象 var imgvar img = new Image(); img.src = '图片路径'; img.onload = function () {// 2、创建平铺模型对象,设置图片的平铺方式var prn = context.createPattern(img,type);//3、将平铺对象设置为需要绘制的图形样式context.fillStyle = prn;//4、进行绘制context.fillRect(0,0,800,800); }
切割图像
切割图像:按照一定方式对绘制的图形进行切割;
- 1.调用 beginPath() 方法,创建一条路径;
- 2.使用 rect() 或 arc() 方法,绘制切割后留下的形状;
- 3.通过 clip() 方法进行切割;
var canvas = document.getElementById('mycanvas'); var context = canvas.getContext('2d');//引入一张外部图片 var img = new Image(); img.src = 'img/dahuangmao-05.png';//创建新的路径,作为切割的形状 img.onload= function () {context.drawImage(img,0,0,300,300); } //进行切割 context.beginPath(); context.rect(50,50,50,50); context.closePath(); context.clip();
canvas中的变形
- 可类比css3中的样式,注意:在canvas中的变形,操作的是画布,而非画布上的形状!
// 用canvas变形做出一个正方形旋转的动画练习
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>canvas {background-color: lightskyblue;}</style>
</head>
<body>
<canvas id="canvas" width="500px" height="300px"></canvas>
<script>var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');//将画布平移到原画布的中心位置,然后在此处画出一个矩形。context.translate(250,150);//注意此矩形的绘制原点在画布之外,所以设为矩形的父半宽和半高;context.strokeRect(-100,-100,200,200);//再绘制一条直线context.beginPath();context.moveTo(0,0);context.lineTo(0,100);context.stroke();//开启定时器,作出动画效果;setInterval(function () {context.clearRect(-500,-300,1000,600);//每次动一度context.rotate(Math.PI/180);//每动一度将矩形和直线重新绘制一遍context.strokeRect(-100,-100,200,200);context.beginPath();context.moveTo(0,0);context.lineTo(0,100);context.stroke();},10)
</script>
</body>
</html>
更多推荐
H5的canvas画布使用
发布评论