跟KingDZ学HTML5之十三 HTML5颜色选择器

这节课主要给大家展示两个实例,当然,都是灰常简单的。

首先是第一个效果,颜色选择器,这个效果如下

我想大家,很多人都做过其他版本的这个东东吧,对了,这次就是要在HTML5里面简单的实现一下

首先要做的就是准备工作了

  <canvas id="text" width="100" height="100"></canvas>
      <p>Red:   <input type="range"   id="red" min="0" max="255" value="0" onchange="fill();"/></p>
      <p>Green:<input type="range"  id="green" min="0" max="255"  value="0" onchange="fill();"/></p>
      <p>Blue:  <input type="range"   id="blue" min="0" max="255"  value="0" onchange="fill();"/></p>
      目前的颜色:<span id="showcolor"></span>

这回我们使用  range 这个 滑动条然后实现想要的效果。

<script type="text/javascript">
          var c = document.getElementById("text");
          var ctx = c.getContext("2d");
          var red = document.getElementById("red");
          var green = document.getElementById("green");
          var blue = document.getElementById("blue");
          function fill() {
              ctx.fillStyle = "rgb(" + red.value + "," + green.value + "," + blue.value + ")";
              document.getElementById("showcolor").innerHTML = ctx.fillStyle;
              ctx.fillRect(0, 0, 100, 100);
          }
      </script>

看到代码了吗?哈哈,十分简单吧,一看就明白了,(*^__^*) 嘻嘻……

第二个例子是,彩带效果,这个就是一个随机显示颜色的效果。呵呵,大家注意这些以后可能我们还会用到的哦。

 <canvas id="text" width="400" height="400">不支持此标签</canvas>
      <input type="button" value="开始运行"  onclick="setInterval(move,1);"/>
      <script type="text/javascript">
          var c = document.getElementById("text");
          var ctx = c.getContext("2d");

          var width = parseInt(c.getAttribute("width"));
          var height = parseInt(c.getAttribute("height"));
          var imageData = ctx.createImageData(width, height);

          function move() {
              var x = 200;
              for (var y = 0; y < height; y++) {
                  ctx.fillStyle = ("rgb(" + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + ")");
                  ctx.fillRect(x, y, 50, 50);
              };
          }
      </script>

这两个例子难度都不大,主要就是对大家的熟悉程度的一个小小的测试,以后的课程我会慢慢的给大家做出一些很有意思的效果的。今天的简单课程到此结束。

时间: 2024-11-05 19:37:51

跟KingDZ学HTML5之十三 HTML5颜色选择器的相关文章

[HTML5 Canvas学习]使用颜色和透明度

在canvas中使用颜色和透明度,通过context的strokeStyle和fillStyle属性设置,strokeStyle和fillStyle的值可以是任意有效的css颜色字串.可以用RGB.RGBA.HSL.HSLA以及十六进制RGB标注来指定颜色,也可以通过 "yellow"."silver"."teal"这样的颜色名称来指定.除此之外,还可以使用SVG1.0规范中的颜色名称,比如"goldenrod"."

玩转html5(一)-----盘点html5新增的那些酷酷的input类型和属性

今天正式开始学习html5了,相比html以前的版本,html5新增了好多功能,属性,使我们做出来的界面更加的绚丽,而且使用起来超级简单,这篇文章先来说说html增加的那些input类型和属性. html5新增的input类型有:email,url,number,range,date pickers,datalist,telephone,search,color email:提交时会自动验证输入的内容是否满足格式 邮箱 :<input type="email" name=&quo

HTML5 简介、HTML5 浏览器支持

HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定. HTML5的设计目的是为了在移动设备上支持多媒体. HTML5 简单易学. 什么是 HTML5? HTML5 是下一代 HTML 标准. HTML , HTML 4.01的上一个版本诞生于 1999 年.自从那以后,Web 世界已经经历了巨变. HTML5 仍处于完善之中.然而,大部分现代浏览器已经具备了某些 HTML5 支持. HTML5 是如何起步的? HTML5 是 W3C 与 WHATWG 合作的结

HTML5开发学习教程,学习HTML5还是学习HTML5的制作工具?

一名优秀的HTML5前端开发工程师在知识体系上既要有广度,又要有深度,所以很多大公司往往出高薪也很难招到理想的前端开发工程师.现在说的重点不在于讲解技术,而是更侧重于对技巧的讲解.技术非黑即白,只有对和错,而技巧则见仁见智. 以前会Photoshop和Dreamweaver就可以制作网页,现在只掌握这些已经远远不够了.无论是开发难度上,还是开发方式上,现在的网页制作都更接近传统的网站后台开发,所以现在不再叫网页制作,而是叫WEB前端开发. HTML5前端开发在产品开发环节中的作用变得越来越重要,

什么是HTML5,做HTML5页面需要学习什么

什么是HTML5,做HTML5页面需要学习什么?很多人问过我这个问题,而问这个问题的人基本上都是刚听说过HTML5,处在懵懂的阶段,他们往往会被一些网上炫酷页面所吸引,开始的目的也很简单,能通过自己的努力做出这些页面,而这些页面效果一般只要通过简单的html和css就能实现,但这仅仅是表面现象,做出来与做好是两码事.而要做好它,必须要深入地去了解什么是HTML5. 在这里小编建了一个前端学习交流扣扣群:132667127,我自己整理的最新的前端资料和高级开发教程,如果有想需要的,可以加群一起学习

菜鸟学SSH(十三)——Spring容器解析及简单实现

最近一段时间,"容器"两个字一直萦绕在我的耳边,甚至是吃饭.睡觉的时候都在我脑子里蹦来蹦去的.随着这些天一次次的交流.讨论,对于容器的理解也逐渐加深.理论上的东西终归要落实到实践,今天就借助Spring容器实现原理,简单说说吧. 简单的说,Spring就是通过工厂+反射将我们的bean放到它的容器中的,当我们想用某个bean的时候,只需要调用getBean("beanID")方法. 原理简单介绍: Spring容器的原理,其实就是通过解析xml文件,或取到用户配置的

jqm视频播放器,html5视频播放器,html5音乐播放器,html5播放器,video开发demo,html5视频播放示例,html5手机视频播放器

最近在论坛中看到了很多实用html5开发视频播放,音乐播放的功能,大部分都在寻找答案.因此我就在这里做一个demo,供大家相互学习.html5开发越来越流行了,而对于视频这一块也是必不可少的一部分.如何让你的网站占据优势,就要看你的功能和用户体验了.html5对video还是做了很多优惠的东西,我们使用起来很得心应手. 在过去 flash 是网页上最好的解决视频的方法,截至到目前还算是主流,像那些优酷之类的视频网站.虾米那样的在线音乐网站,仍然使用 flash 来提供播放服务.但是这种状况将会随

HTML5学习总结——HTML5入门与新增标签

一.HTML5概要 1.1.为什么需要HTML5 概念: HTML5 是继 HTML4.01, XHTML 1.0 和 DOM 2 HTML 后的又一个重要版本, 旨在消除富 Internet 程序(RIA)对 Flash, Silverlight, JavaFX 一类浏览器插件的依赖. 1991年HTML1.0标准出现1997年HTML4.0发布,4.0标准下的浏览器局限性Flash (安全与稳定堪忧.耗电.触摸.不开放)SilverlightJavaApplet2008年HTML5出现, W

【html5】使用 html5 的十大原因

你难道还没有考虑使用 html5? 当然我猜想你可能有自己的原因:它现在还没有被广泛的支持,在 ie 中不好使,或者你就是喜欢写比较严格的 xhtml 代码.html5 是 web 开发世界的一次重大的改变,事实上不管你是否喜欢,它都是代表着未来趋势.其实 html5 并不难理解和使用.我们这里能列出许多原因为什么现在要开始使用 html5. 目前有很多的文章介绍使用 html5 并且介绍了使用它的优势和好处,没错,这篇文章也类似.随着更多这样的文章,以及 apple 的支持,adobe 围绕