[前端] canvas绘制圆、渐变、字体和图片及其他

H5标签之canvas使用，前端学习必备。。

 

Canvas优缺点：
    依赖分辨率
    不支持事件处理器
    弱的文本渲染能力
    能够以 .png 或 .jpg 格式保存结果图像
    最适合图像密集型的游戏，其中的许多对象会被频繁重绘

 

实例使用

canvas标签：

 

<canvas id="canvas" width="600" height="350">您的浏览器不支持canvas</canvas>

 

 

 

一、绘制圆

1、空心圆：

 

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.arc(95,50,40,0,2*Math.PI); // arc(x,y,radius,开始弧度,结束弧度)
ctx.stroke();

 

 

2、实心圆

 

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.arc(95,50,40,0,2*Math.PI);  // arc(x,y,radius,开始弧度,结束弧度)
ctx.fillStyle = 'red';
ctx.fill();

 

 

 

二、绘制渐变

1、线性渐变

 

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var grd=ctx.createLinearGradient(0,0,200,0);  // createLinearGradient(x,y,x1,y1) 
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(0,0,180,80);

 

 

 

2、径向渐变

 

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var grd=ctx.createRadialGradient(75,50,5,90,60,100); // createRadialGradient(x,y,r,x1,y1,r1) 
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

 

 

 

注：

addColorStop(0,'red');

addColorStop(1,'green');

这里的0,1表示起始到终点位置  中间可以插入 0.2 0.4 0.6 0.8等的位置

 

三、绘制字体

1、实心字体

 

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50); // fillText(text,x,y)

 

 

2、空心字体

 

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50); // strokeText(text,x,y)

 

 

 

四、绘制图片

 

/*
 img       规定要使用的图像、画布或视频。
 sx            可选。开始剪切的 x 坐标位置。
 sy            可选。开始剪切的 y 坐标位置。
 swidth        可选。被剪切图像的宽度。
 sheight   可选。被剪切图像的高度。
 x         在画布上放置图像的 x 坐标位置。
 y         在画布上放置图像的 y 坐标位置。
 width     可选。要使用的图像的宽度。（伸展或缩小图像）
 height        可选。要使用的图像的高度。（伸展或缩小图像）
*/
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src='./image/zhaoliying.png';
img.onload = function() {  // 一定要在onload里绘制，否则图片绘制不出来 onload是加载完成事件
    ctx.drawImage(img, 0, 0, 300, 180, 10, 10, 300, 180);
}

 

欢迎关注技术开发分享录：http://fenxianglu.cn/