您的位置：首页 > Web前端 > HTML5

HTML5利用Canvas绘制图形(绘制渐变、模式、变换)

2017-06-03 23:30 597 查看

绘制渐变

渐变是一种很普遍的视觉形象，能带来视觉上的舒适感。在Canvas中，绘图API提供了两个原生的渐变方法，包括线性渐变和径向渐变。渐变，在颜色集上使用逐步抽样的算法，可以应用的描边样式和填充样式中。使用渐变需要三个步骤：首先是创建渐变对象；其次是设置渐变颜色和过渡方式；最后将渐变对象赋值给填充样式或描边样式。

代码实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绘制渐变</title>
<script type="text/javascript">
function Draw(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");

//创建渐变对象：线性渐变
var grd=context.createLinearGradient(0,0,300,0);
//设置渐变颜色及方式
grd.addColorStop(0,"#f90");
grd.addColorStop(1,"#0f0");
//将填充样式设置为线性渐变对象
context.fillStyle=grd;
context.fillRect(0,0,300,80);
}
window.addEventListener("load",Draw,false);
function Draw2(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");

//创建渐变对象：径向渐变
var grd=context.createLinearGradient(0,0,300,0);
//设置渐变颜色及方式
grd.addColorStop(0,"#0f0");
grd.addColorStop(1,"#f90");
//将填充样式设置为线性渐变对象
context.fillStyle=grd;
context.beginPath();
context.arc(180,180,90,0,Math.PI*2,true);
context.fill();
}
window.addEventListener("load",Draw2,false);
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300">你的浏览器不支持canvas</canvas>
<canvas id="canvas2" width="400" height="300">你的浏览器不支持canvas</canvas>
</body>
</html>

效果上(线性渐变)，下(径向渐变)

模式

模式是一个抽象的概念，描述的是一种规律。在Canvas中，通常会为贴图图像创建一个模式，用于描边样式和填充样式，可以绘制出带图案的边框和背景图。

代码实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模式</title>
<script type="text/javascript">
function Draw(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");

var img=new Image();
img.src="../img/5.jpg";
img.onload=function(){
//创建一个贴图模式，循环平铺图像
var ptrn=context.createPattern(img,'repeat');
context.fillStyle=ptrn;
context.fillRect(0,0,1000,2000);
}
}
window.addEventListener("load",Draw,false);
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300">你的浏览器不支持canvas</canvas>
</body>
</html>

效果

变换

在绘制图像的过程中，如果一种形状的图形要绘制多次，显然是增加了复杂性。Canvas绘图API提供了多种变换方法，为实现复杂的绘图操作提供了便捷的方法。常见的变换方法包括平移、缩放、旋转和变形。

1. 移动变换

将整个坐标系统设置一定的偏移数量，绘制出来的图像也会跟着偏移。(默认以左上角(0,0)作为原点)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绘制渐变</title>
<script type="text/javascript">
function Draw(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");

//设置移动偏移量
context.translate(200,120);

//绘制一个圆形脸谱
ArcFace(context);
}
function ArcFace(context){
//绘制一个圆形边框
context.beginPath();
context.arc(0,0,90,0,Math.PI*2,true);
context.lineWidth=5;
context.strokeStyle="#f90";
context.stroke();
//绘制一个脸谱
context.beginPath();
context.moveTo(-30,-30);
context.lineTo(-30,-20);
context.moveTo(30,-30);
context.lineTo(30,-20);
context.moveTo(-20,30);
context.bezierCurveTo(-20,44,20,30,30,20);
context.strokeStyle="#000";
context.lineWidth=10;
context.lineCap="round";
context.stroke();
}
window.addEventListener("load",Draw,false);
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300">你的浏览器不支持canvas</canvas>
</body>
</html>

效果

2.缩放变换

缩放变换是将整个坐标系统设置一对缩放因子，绘制出来的图像会相应的缩放。

代码实现

function Draw(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");

//设置移动偏移量
context.translate(200,120);

//缩放图像，在水平方向和垂直方向设置不同的缩放因子
context.scale(0.6,0.4)

//绘制一个圆形脸谱
ArcFace(context);
}

效果

3.旋转变换

是将整个坐标系统设置一个选装的角度，绘制出来的图像会相应的旋转。

function Draw(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");

//设置移动偏移量
context.translate(200,120);

//旋转图像，顺时针旋转30度
context.rotate(Math.PI/6);
//缩放图像，在水平方向和垂直方向设置不同的缩放因子
context.scale(0.6,0.4)

//绘制一个圆形脸谱
ArcFace(context);
}

效果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 网页 html5 canvas

相关文章推荐

新的分享

章节导航