接着上文[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)继续.

一、线形渐变

线形渐变指的是一条直线上发生的渐变。

用法：

var linear = cxt.createLinearGradient( x1, y1, x2, y2 );

linear.addColorStop( value1, color1 );

linear.addColorStop( value2, color2 );

.....

oGc.fillStyle = linear

oGc.fill();

1) createLinearGradient创建一个线形渐变对象. x1, y1表示渐变的起点. x2, y2表示渐变的终点.

2)addColorStop在某处添加渐变颜色值

3)fillStyle：把渐变对象作为填充样式

4)调用fill及其他相关图形进行渐变填充

水平渐变

 <head>

 <meta charset='utf-8' />

 <style>

 #canvas{

     border:1px dashed #aaa;

 }

 </style>

 <script>

 window.onload = function(){

     var oCanvas = document.querySelector( "#canvas" ),

         oGc = oCanvas.getContext( '2d' );

     var linear = oGc.createLinearGradient( 0, 400, 500, 400 );

     linear.addColorStop( 0, 'red' );

     linear.addColorStop( 1, '#09f' );

     oGc.fillStyle = linear;

     oGc.fillRect( 0, 0, 500, 400 );

 }

 </script>

 </head>

 <body>

 <canvas id="canvas" width="500" height="400"></canvas>

 </body>

垂直渐变：

 <head>

     <meta charset='utf-8' />

     <style>

     #canvas{

         border:1px dashed #aaa;

     }

     </style>

     <script>

     window.onload = function(){

         var oCanvas = document.querySelector( "#canvas" ),

             oGc = oCanvas.getContext( '2d' );

         var linear = oGc.createLinearGradient( 400, 0, 400, 500 );

         linear.addColorStop( 0, 'red' );

         linear.addColorStop( 1, '#09f' );

         oGc.fillStyle = linear;

         oGc.fillRect( 0, 0, 500, 400 );

     }

     </script>

 </head>

 <body>

     <canvas id="canvas" width="500" height="400"></canvas>

 </body>

对角线渐变：

 <head>

     <meta charset='utf-8' />

     <style>

     #canvas{

         border:1px dashed #aaa;

     }

     </style>

     <script>

     window.onload = function(){

         var oCanvas = document.querySelector( "#canvas" ),

             oGc = oCanvas.getContext( '2d' );

         var linear = oGc.createLinearGradient( 0, 0, 400, 500 );

         linear.addColorStop( 0, 'red' );

         linear.addColorStop( 1, '#09f' );

         oGc.fillStyle = linear;

         oGc.fillRect( 0, 0, 500, 400 );

     }

     </script>

 </head>

 <body>

     <canvas id="canvas" width="500" height="400"></canvas>

 </body>

为文字添加线形渐变效果

 <head>

     <meta charset='utf-8' />

     <style>

     #canvas{

         border:1px dashed #aaa;

     }

     </style>

     <script>

     window.onload = function(){

         var oCanvas = document.querySelector( "#canvas" ),

             oGc = oCanvas.getContext( '2d' ),

             text = '跟着ghostwu学习html5 canvas教程';

             oGc.font = '22px bold 微软雅黑';

         var linear = oGc.createLinearGradient( 20, 100, 400, 100 );

         linear.addColorStop( 0, 'red' );

         linear.addColorStop( 1, '#09f' );

         oGc.fillStyle = linear;

         oGc.fillText( text, 50, 100 );

     }

     </script>

 </head>

 <body>

     <canvas id="canvas" width="500" height="400"></canvas>

 </body>

二、径向渐变

颜色渐变从一个起点向各个方向渐变，用法跟线形渐变差不多，只不过创建渐变的时候用的是另一个函数

var radial = cxt.createRadialGradient( x1, y1, r1, x2, y2, r2 )

....下面的步骤跟线形渐变一样，不再重复了

x1, y1起始点的圆心坐标，r1: 起始点 圆的半径

x2，y2结束点的圆心坐标，r2:结束点 圆所在的半径

 <head>

     <meta charset='utf-8' />

     <style>

     #canvas{

         border:1px dashed #aaa;

     }

     </style>

     <script>

     window.onload = function(){

         var oCanvas = document.querySelector( "#canvas" ),

             oGc = oCanvas.getContext( '2d' ),

             width = oCanvas.width, height = oCanvas.height;

         oGc.beginPath();

         oGc.arc( 100, 100, 100, 0, 360 * Math.PI / 180, false );

         oGc.closePath();

         var radial = oGc.createRadialGradient( 150, 50, 10, 100, 100, 100 );

         radial.addColorStop( 0.1, 'white' );

         radial.addColorStop( 0.6, 'orange' );

         radial.addColorStop( 1, 'red' );

         oGc.fillStyle = radial;

         oGc.fill();

         oGc.beginPath();

         oGc.arc( 320, 100, 100, 0, 360 * Math.PI / 180, false );

         oGc.closePath();

         var radial2 = oGc.createRadialGradient( 280, 50, 10, 320, 100, 100 );

         radial2.addColorStop( 0.1, 'white' );

         radial2.addColorStop( 0.6, 'orange' );

         radial2.addColorStop( 1, 'rgba( 255, 0, 0, 0.5 )' );

         oGc.fillStyle = radial2;

         oGc.fill();

         oGc.beginPath();

         oGc.lineWidth = 1;

         oGc.strokeStyle = '#eee';

         for( var i = 0; i < width; i += 10 ){

             oGc.moveTo( i, 0 );

             oGc.lineTo( i, height );

         }

         for( var j = 0; j < height; j += 10 ){

             oGc.moveTo( 0, j );

             oGc.lineTo( width, j );

         }

         oGc.closePath();

         oGc.stroke();

         oGc.beginPath();

         oGc.fillStyle = 'red';

         oGc.strokeStyle = 'blue';

         oGc.moveTo( 150, 0 );

         oGc.lineTo( 150, height );

         oGc.moveTo( 0, 50 );

         oGc.lineTo( width, 50 );

         oGc.fillText( '(150,50)', 170, 30 );

         oGc.stroke();

         oGc.closePath();

         oGc.beginPath();

         oGc.strokeStyle = 'yellow';

         oGc.fillStyle = 'black';

         oGc.moveTo( 100, 0 );

         oGc.lineTo( 100, height );

         oGc.moveTo( 0, 100 );

         oGc.lineTo( width, 100 );

         oGc.fillText( '(100,100)', 30, 120 );

         oGc.stroke();

     }

     </script>

 </head>

 <body>

     <canvas id="canvas" width="500" height="400"></canvas>

 </body>

我在图中做出了第一个径向渐变的圆心坐标，便于观看

同心圆渐变:

 <head>

     <meta charset='utf-8' />

     <style>

     #canvas{

         border:1px dashed #aaa;

     }

     </style>

     <script>

     window.onload = function(){

         var oCanvas = document.querySelector( "#canvas" ),

             oGc = oCanvas.getContext( '2d' ),

             width = oCanvas.width, height = oCanvas.height;

         var radial = oGc.createRadialGradient( 100, 100, 0, 100, 100, 100 );

         radial.addColorStop( 0, 'red' );

         radial.addColorStop( 0.25, 'orange' );

         radial.addColorStop( 0.5, 'yellow' );

         radial.addColorStop( 0.75, 'green' );

         radial.addColorStop( 1, '#09f' );

         oGc.fillStyle = radial;

         oGc.fillRect( 10, 10, 200, 200 );

     }

     </script>

 </head>

 <body>

     <canvas id="canvas" width="500" height="400"></canvas>

 </body>

三、阴影设置

跟css3的边框阴影用法差不多.

cxt.shadowOffsetX: 水平阴影，可以设置正负数, 正数->向右偏移，负数->向左偏移

cxt.shadowOffsetY:  垂直阴影，可以设置正负数，正数->向下偏移，负数->向上偏移

cxt.shadowColor: 阴影的颜色

cxt.shadowBlur: 阴影的模糊范围

 <head>

     <meta charset='utf-8' />

     <style>

     #canvas{

         border:1px dashed #aaa;

     }

     </style>

     <script>

     window.onload = function(){

         var oCanvas = document.querySelector( "#canvas" ),

             oGc = oCanvas.getContext( '2d' ),

             width = oCanvas.width, height = oCanvas.height;

             oGc.shadowOffsetX = 5;

             oGc.shadowOffsetY = 5;

             oGc.shadowColor = '#09f';

             oGc.shadowBlur = 10;

             oGc.fillStyle = 'red';

             oGc.fillRect( 10, 10, 100, 100 );

             oGc.shadowOffsetX = -5;

             oGc.shadowOffsetY = -5;

             oGc.shadowColor = '#09f';

             oGc.shadowBlur = 10;

             oGc.fillStyle = 'red';

             oGc.fillRect( 140, 20, 100, 100 );

     }

     </script>

 </head>

 <body>

     <canvas id="canvas" width="500" height="400"></canvas>

 </body>

给文字设置阴影：

 <head>

     <meta charset='utf-8' />

     <style>

     #canvas{

         border:1px dashed #aaa;

     }

     </style>

     <script>

     window.onload = function(){

         var oCanvas = document.querySelector( "#canvas" ),

             oGc = oCanvas.getContext( '2d' ),

             width = oCanvas.width, height = oCanvas.height;

             oGc.shadowOffsetX = 2;

             oGc.shadowOffsetY = 2;

             oGc.shadowColor = '#09f';

             oGc.shadowBlur = 1;

             oGc.font = '30px bold 微软雅黑';

             oGc.fillText( '跟着ghostwu学习html5 canvas', 20, 100 );

     }

     </script>

 </head>

 <body>

     <canvas id="canvas" width="500" height="400"></canvas>

 </body>

给图片设置阴影

 <head>

     <meta charset='utf-8' />

     <style>

     #canvas{

         border:1px dashed #aaa;

     }

     </style>

     <script>

     window.onload = function(){

         var oCanvas = document.querySelector( "#canvas" ),

             oGc = oCanvas.getContext( '2d' ),

             width = oCanvas.width, height = oCanvas.height;

             var oImg = new Image();

             oImg.src = './img/mv.jpg';

             oImg.onload = function(){

                 oGc.shadowOffsetX = 5;

                 oGc.shadowOffsetY = 5;

                 // oGc.shadowOffsetX = 0;

                 // oGc.shadowOffsetY = 0;

                 oGc.shadowColor = '#888';

                 oGc.shadowBlur = 20;

                 oGc.fillRect( 50, 20, 200, 200 );

                 oGc.drawImage( oImg, 50, 20 );

             }

     }

     </script>

 </head>

 <body>

     <canvas id="canvas" width="500" height="400"></canvas>

 </body>

给图片的四周设置阴影：

把shadowOffsetX和shadowOffsetY都设置为0，那么就会在四周产生阴影效果

 <head>

     <meta charset='utf-8' />

     <style>

     #canvas{

         border:1px dashed #aaa;

     }

     </style>

     <script>

     window.onload = function(){

         var oCanvas = document.querySelector( "#canvas" ),

             oGc = oCanvas.getContext( '2d' ),

             width = oCanvas.width, height = oCanvas.height;

             var oImg = new Image();

             oImg.src = './img/mv.jpg';

             oImg.onload = function(){

                 oGc.shadowOffsetX = 0;

                 oGc.shadowOffsetY = 0;

                 oGc.shadowColor = '#888';

                 oGc.shadowBlur = 20;

                 oGc.fillRect( 50, 20, 200, 200 );

                 oGc.drawImage( oImg, 50, 20 );

             }

     }

     </script>

 </head>

 <body>

     <canvas id="canvas" width="500" height="400"></canvas>

 </body>

[js高手之路] html5 canvas系列教程 - 线形渐变,径向渐变与阴影设置的更多相关文章

  1. [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API

    我们接着上文[js高手之路] html5 canvase系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...

  2. [js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)

    之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, ...

  3. [js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形)

    绘制曲线,经常会用到路径的知识,如果你对路径有疑问,可以参考我的这篇文章[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解. arc:画 ...

  4. [js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)

    接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的 ...

  5. [js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)

    接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续. canvas提供两种输出文本的方 ...

  6. [js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)

    上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...

  7. [js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)

    接着上文[js高手之路] html5 canvas系列教程 - 状态详解(save与restore),相信大家都应该玩过美颜功能,而我们今天要讲的就是canvas强大的像素处理能力,通过像素处理,实现 ...

  8. [js高手之路] html5 canvas系列教程 - 状态详解(save与restore)

    本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念.掌握理解他们是做出复杂canvas动 ...

  9. [js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法

    canvas是html5中引入的一个新元素,俗称画布,既然是画布,当然是用来画图的.canvas技术指的是利用javascript操作canvas元素绘制图形的技术,要使用canvas,一定要浏览器支 ...

随机推荐

  1. Html5笔记之第七天

    视频格式 格式 MIME-type MP4 video/mp4 WebM video/webm Ogg video/ogg MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 ...

  2. 关于C#开发 windows服务进程

    最近在做一个物联网项目,其中有一个模块是需要实现热水工程的自动化补水和回水功能 实现的方式有多种,我选用了VS C#的Windows服务方式. 首先是创建一个windows服务项目(名称随你喜欢的规范 ...

  3. python爬虫之一---------豆瓣妹子图

    #-*- coding:utf-8 -*- __author__ = "carry" import urllib import urllib2 from bs4 import Be ...

  4. node.js 下载安装及gitbook环境安装、搭建

    最近需要gitbook看文档,于是各种百度,各种安装,很多都是无法正常安装完成的,比较纠结啊 最后,终于发现一个好用的,现分享一下地址(也是给自己做个记录): 1.node.js下载地址: http: ...

  5. Spring Boot + Dubbo 可运行的例子源码-实现服务注册和远程调用

    最近公司的一个分布式系统想要尝试迁移到Dubbo,项目本身是Spring Boot的,经过一些努力,最终也算是搭建起一个基础的框架了,放到这里记录一下.需要依赖一个外部的zookeeper. 源码地址 ...

  6. OSI与TCP/IP网络模型分层

      学习linux的人,都会接触到一些网络方面的知识.作为一个linux方面的萌新,今天,小编就接触了OSI模型和TCP/IP协议栈,那么什么是OSI模型呢?     OSI模型,开放式系统互联通信参 ...

  7. Rsync for windows

    说到电脑,我真是一屋子都是. 从房间到大厅,就已经有5台.这还没包括服务器. 虽然这5台电脑我最常用的也只是2~3台.其他的不是给朋友们来坐的时候打打游戏.就是给妈妈上网看看报纸. 不过我相信很多朋友 ...

  8. 201521123091 《Java程序设计》第7周学习总结

    Java 第七周总结 第七周的作业. 目录 1.本章学习总结 2.Java Q&A 3.码云上代码提交记录及PTA实验总结 1.本章学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内 ...

  9. 201521123082 《Java程序设计》第6周学习总结

    201521123082 <Java程序设计>第6周学习总结 标签(空格分隔): java 1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念 ...

  10. 201521123001《Java程序设计》第7周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 参考资料: XMind 答: 大多数情况下,从性能上来说ArrayList最好,但是当集合内的元素需要频繁插入.删除时Lin ...