H5的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>
1781
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
