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

随着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交流学习。

用H5 canvas实现唯美渐变色块的绘制相关推荐

javascript研发唯美表白神器，程序猿不做单身狗！
点击查看特效动图做一个浪漫的程序猿,迎娶女神不是梦基础课题:HTML5/javascript炫丽的爱心飘落知识点:html/css布局思维,css浮动.定位盒模型, css伪类的灵活运用,jav ...
简单的php引导页面设计,PS简单制作唯美朦胧柔美的渐变APP引导页
今天小编为大家分享PS简单制作唯美朦胧柔美的渐变APP引导页方法,教程很不错,难度不是很大,推荐到脚本之家,大家快快来学习吧! 此适合和对颜色研究不深,又急需应用的朋友.小编良心保证,再零基础的同学也 ...
css动画唯美背景,小码哥-利用CSS3渐变实现唯美背景图
原标题:小码哥-利用CSS3渐变实现唯美背景图 CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用 CSS3 渐 ...
唯美“光效”PNG免扣素材大集合，一眼爱上！
光效PNG图片大全非常实用,很多场景都能用上粒子光效和仙女光效可以制作抖音上很火的仙女特效视频穿越视频也是可以,玩玩巴拉巴拉小魔仙现身萤火虫和火花用于傍晚或者黑夜视频效果简单太唯美烟花就更不用说 ...
唯美红色圣诞节背景素材，节日气氛尽显
圣诞节的设计宗旨是什么? 当然是好看的图片! 颜值即正义! 不管是制作贺卡,还是宣传海报前提都是好看! 好看的图片都出现在别人的设计里? 唯美红色圣诞节背景素材,节日气氛尽显! 红色背景圣诞节节日礼 ...
linux打印文件名称唯美,程序员的情人节应该这么优雅度过（附源码）
2018,2月,14日,和春节一前一后的情人节快要来了,IT 界的程序员你们想要度过这个美好的节日呢?你想用什么特别的方式对你爱的人表白呢? 我们程序员是有情怀,懂浪漫的,富有理想主义的一个族群,智商 ...
你是这样的 CSS，19个唯美的边框
作者:niemvuilaptrin 译者:前端小智来源:medium 有梦想,有干货,微信搜索 [大迁世界] 关注这个在凌晨还在刷碗的刷碗智. 本文 GitHub https://github.co ...
绘制六芒星战斗力属性图 —— h5 canvas 初体验
在黄金的沙滩上安息着远古的悲剧在深绿的波涌中停着灵魂的船 --<眼睛>,顾城最近用MUI做Web app时想实现一个六芒星战斗力图的(类似LPL赛前战队实力分析图)效果,由于正多边 ...
html5游戏美术,Steam独立唯美向游戏推荐：岂止游戏，更为艺术
steam冬季大促即将来临,为了不让大家有钱没地方花,这次我来推荐数款独立唯美向冷门游戏 1.<艾迪芬奇的记忆> 英:What Remains of Edith Finch 提名数项奖项 ...

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

用H5 canvas实现唯美渐变色块的绘制相关推荐

最新文章

热门文章