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

用H5 canvas实现唯美渐变色块的绘制

2017-12-21 15:10 751 查看

随着Web前端的不断发展，我们已经可以使用H5+js+css做出很多复杂而优美的视觉效果。一幕幕的视觉盛宴背后是网页设计人员精巧的构思和前端开发人员的精湛技能。今天我们来讲述一下简单H5 canvas 渐变色块的绘制，希望给有需要的读者一定的启发，day day up together。

① 首先我们需要了解的是canvas的绘图机制。canvas其实简单来讲就是一块画布，我们可以在里面添加图片，文字，线条甚至高级动画。概念蛮复杂但使用起来十分简便，我们使用

<canvas></canvas>

即可放置画布。我们可以通过修改开始标签中的参数来进行画布设置，如

<canvas width="600" height="600"></canvas>

即可在页面上放置一块600px×600px的区域为画布。

② 但现在它并没有颜色只是指定了大小。我们可以给它加上一个边框使之可见：

<canvas id="test1" style="border:2px solid;" width="600" height="600"></canvas>

使用style为之增加一个边框，同时我们为之增加一个id特性，便于我们通过这个id来找到该canvas元素。请读者自行拷贝或手动输入代码执行观察结果。

当我们使用canvas时，需要加入此句表示对canvas的引用：

var canvas=document.getElementById(id);

var context=canvas.getContext(‘2d’);

使用canvas对象的getcontext方法获得图形上下文。

③ 我们来了解一下所需要的canvas绘图机制，fillRect,strokeRect,fillStyle和strokeStyle。

fillRect用于填充矩形，strokeRect用于绘制矩形边框。使用方法相同，

context.fillRect(x,y,width,height);

context.strokeRect(x,y,width,height);

fillStyle被我们用来设置填充颜色，而strokeStyle用于设置轮廓颜色。使用方法相同，

context.fillStyle(x,y,width,height);

context.strokeStyle(x,y,width,height);

④ 接下来我们开始渐变色块的绘制。我们使用600*600的canvas画布，颜色使用RGB，值用双层循环加数学公式来设定，context.fillStyle=’rgb(‘+Math.floor(255-42.5*i)+’,’+Math.floor(255-42.5*j)+’,0)’

每个色块大小设置为100px，6行6列，context.fillRect(j*100,i*100,100,100);。

具体实现代码如下：

渐变色绘制 · 代码

<body>
<div id="test1" style="margin-left:20px; margin-top: 20px;width: 600px;height: 600px;background-color: whitesmoke;">
<canvas id="change" width="600" height="600"></canvas>
</body>
<script type="text/javascript">
var canvas=document.getElementById("change");
var context=canvas.getContext('2d');
for(var i=0;i<6;i++){
for(var j=0;j<6;j++){
context.fillStyle='rgb('+Math.floor(255-42.5*i)+','+Math.floor(255-42.5*j)+',0)';
context.fillRect(j*100,i*100,100,100);
}
}
</script>

绘制出的图形即如下图：

主要思想是其中颜色变化的实现方法，利用循环加数学公式改变RGB值。

具体流程如上，读者可自行尝试。把上述几种绘图机制掌握好，可自行引申到其他的图形上去。

博主在吉林大学，是大四到公司实习的大学生，现在在东方国信公司做软件测试。
菜鸟一只，也在不断的学习阶段，平时的小经验不定期分享。
愿与同在CSDN的你共同进步。
有意可加QQ1255187803交流学习。

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

标签： 前端开发

相关文章推荐

新的分享

章节导航