HTML5-画布（canvas）效果之-渐变色

<!DOCTYPE HTML><html><head>    <title>渐变色</title></head><body>    <canvas id="canvas" width="200" height="100" style="background-color: rgb(222, 222, 222)">        您的浏览器不支持 canvas 标签    </canvas>    <br />    <button type="button" onclick="drawIt();">Demo</button>    <button type="button" onclick="clearIt();">清除画布</button>

    <script type="text/javascript">

        var ctx = document.getElementById('canvas').getContext('2d');

        function drawIt() {

            clearIt();

            /*             * context.createLinearGradient(xStart, yStart, xEnd, yEnd) - 创建线性渐变对象，并返回 CanvasGradient 类型的对象             *   xStart, yStart - 线性渐变对象的起始点坐标             *   xEnd, yEnd - 线性渐变对象的结束点坐标             *             * CanvasGradient.addColorStop(offset, color) - 新增一个渐变参考点             *   offset - 渐变参考点的位置，0.0 - 1.0 之间。起始点为 0，结束点为 1             *   color - 渐变参考点的颜色值              */            var linearGradient = ctx.createLinearGradient(50, 0, 50, 100);            linearGradient.addColorStop(0, "red");            linearGradient.addColorStop(0.5, "green");            linearGradient.addColorStop(1, "blue");

            ctx.beginPath();            ctx.arc(50, 50, 50, 0, 2 * Math.PI, true);            ctx.fillStyle = linearGradient;            ctx.fill();

            /*             * context.createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd) - 创建放射性渐变对象，并返回 CanvasGradient              *   xStart, yStart - 放射性渐变对象的开始圆的圆心坐标             *   radiusStart - 开始圆的半径             *   xEnd, yEnd - 放射性渐变对象的结束圆的圆心坐标             *   radiusEnd - 结束圆的半径             */            var radialGradient = ctx.createRadialGradient(150, 50, 0, 150, 50, 50);            radialGradient.addColorStop(0, "red");            radialGradient.addColorStop(0.5, "green");            radialGradient.addColorStop(1, "blue");

            ctx.beginPath();            ctx.arc(150, 50, 50, 0, 2 * Math.PI, true);            ctx.fillStyle = radialGradient;            ctx.fill();        }

        function clearIt() {            ctx.clearRect(0, 0, 200, 100);        }

    </script></body></html>

HTML5-画布（canvas）效果之-渐变色相关推荐

用html5写一段文字画布中,10个让人惊叹的HTML5画布(canvas)技术效果
随着老式浏览器(IE6,IE8)的逐渐淘汰,现代浏览器(火狐浏览器,谷歌浏览器,Opera,Safari)走向主流,越来越多的HTML5和CSS3技术开始出现在各种网站上.这些最新的网页技术究竟能给我 ...
html5画布作品,10个会让你惊叹不已的HTML5画布(CANVAS)技术应用演
下面的这是10个HTML5画布(canvas)技术效果演示一定会让你惊叹不已.当然,也许你也会认为,过去在老式浏览器中用flash技术也能实现这样的效果.但是,下面的这些演示只使用了现代浏览器里自带技 ...
html5好看画布,10个会让你惊叹不已的HTML5画布(CANVAS)技术应用演
下面的这是10个HTML5画布(canvas)技术效果演示一定会让你惊叹不已.当然,也许你也会认为,过去在老式浏览器中用flash技术也能实现这样的效果.但是,下面的这些演示只使用了现代浏览器里自带技 ...
html画布设计,10个会让你惊叹不已的HTML5画布(canvas)技术应用
随着老式浏览器(IE6)的逐渐淘汰,现代浏览器(火狐浏览器,谷歌浏览器,Opera,Safari)走向主流,越来越多的HTML5和CSS3技术开始出现在各种网站上.这些最新的网页技术究竟能给我们今后的 ...
未来技术 html5 app,未来web浏览技术提前体验：10个会让你惊叹不已的HTML5画布(canvas)技术应用演示...
随着老式浏览器(IE6,IE8)的逐渐淘汰,现代浏览器(火狐浏览器,谷歌浏览器,Opera,Safari)走向主流,越来越多的HTML5和CSS3技术开始出现在各种网站上.这些最新的网页技术究竟能给我 ...
html5 2020视觉效果,体验未来：10个会让你惊叹不已的HTML5画布(CANVAS)技术应用演示-UI博客精选...
随着老式浏览器(IE6)的逐渐淘汰,现代浏览器(火狐浏览器,谷歌浏览器,Opera,Safari)走向主流,越来越多的HTML5和CSS3技术开始出现在各种网站上.这些最新的网页技术究竟能给我们今后的 ...
电脑PHP动画制作画板,三分钟HTML5画布(Canvas)动画教程
此文下面的教程中将使用的是另外一个叫做kinetic的Web动画工具包. 它们都是开源的. 把鼠标放到上面的小丑脸上,然后移开,就会有如下效果. 第一步,画五官这个小丑没有耳朵和眉毛,所以只剩下三官 ...
HTML5画布(CANVAS)速查简表
>HTML5画布(Canvas)元素 <canvas id="myCanvas" width="500" height="300" ...
html5画布作品,10款面向HTML5 画布(Canvas)的JavaScript库
Processing.js Processing.js是一个开放的编程语言,在不使用Flash或Java小程序的前提下,可以实现程序图像.动画和互动的应用.Processing.js是轻量,易于了解掌 ...
php绘制时钟刻度,html5 画布时钟效果
网上看到个时钟效果,感觉挺好看,转了来,具体通过html5画布技术实现的,效果图如下: 具体 html 代码: html5 时钟效果 /** * Created by Administrator on ...

HTML5-画布（canvas）效果之-渐变色

HTML5-画布（canvas）效果之-渐变色相关推荐

最新文章

热门文章