小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man
本篇继续介绍html5的绘制效果,和之前介绍的不同,本篇介绍的渐变并不是一个状态值,他是之前介绍的fillStyle的一个值。首先来看一个例子:
代码如下:
vargradient=context.createLinearGradient(50,50,150,150);
gradient.addColorStop(0,"rgb(0,0,0)");
gradient.addColorStop(1,"rgb(0,255,0)");
context.fillStyle=gradient;
context.fillRect(50,50,100,100);
这是一个线性渐变,首先通过createLinearGradient创建线性渐变,四个参数分别为起点的横纵坐标和终点的横纵座标,然后为两个点加入色值,addColorStop的0为起点,1为终点,第二个参数是颜色,可以是rgb也可以是rgba。
前一个是线性渐变,还有弧形渐变,效果如下:
代码如下:
vargradient=context.createRadialGradient(50,50,5,150,150,10);
gradient.addColorStop(0,"rgb(0,0,0)");
gradient.addColorStop(1,"rgb(0,255,0)");
context.fillStyle=gradient;
context.fillRect(50,50,100,100);
createRadialGradient前三个参数为起点圆的圆心横纵坐标,圆半径。后三个参数如下是终点圆圆心坐标和圆的半径。
使用圆形渐变可以绘制出中心开始的渐变,效果如下:
代码如下:
vargradient=context.createRadialGradient(100,100,0,100,100,72);
gradient.addColorStop(0,"rgb(0,0,0)");
gradient.addColorStop(1,"rgb(0,255,0)");
context.fillStyle=gradient;
context.fillRect(50,50,100,100);
起点和终点是正方形的中心,半径不同就可以造出这种效果。
如有错误,希望大家多多指正
下一篇继续研究绘制的高级功能
分享到:
相关推荐
HTML5 Canvas生成粒子效果的人物头像html5-canvas-pixel-image-master.zip
html5-canvas-rabbit-run-games-code 3d游戏 适应手机和PC
html5-canvas-border-pixel-progressbar源码
ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-...
这是一款基于HTML5 Canvas实现的彩色渐变背景动画效果,跟随鼠标移动的HTML5交互式渐变背景动画特效。
html5-canvas-3d-earth-rotate.zip
html5-canvas-3d-line-avatar.zip
html5-canvas-520-love-cartoon-codes(jb51.net).rar
html2canvas-1.0.0-rc.4版本
低版本HTML2canvas 前端开发 生成海报 截图等功能 1.该脚本允许您直接在用户浏览器上对网页或其部分进行“截图”。屏幕截图基于 DOM,因此可能不是 100% 准确到真实表示,因为它不会制作实际的屏幕截图,而是根据...
Leaflet.Canvas-Markers-0.2.0 https://github.com/corg/Leaflet.Canvas-Markers
html2canvas 的 @1.0.0-rc.4 版本,兼容IOS13,npm install时候安装版本不对可以直接下载这个,选择dist内的js文件引入
javascrip canvas画布,实现动态背景。
canvas-js-动画-例子
我将尝试通过创建一系列教程来解决此问题,以说明文本编辑器的所有重要方面,同时使用HTML5 canvas和许多JavaScript代码创建可用的应用程序。 以下是按优先级排列的编辑器功能要求列表: 键盘光标导航和选择; ...
资源分类:Python库 所属语言:Python 资源全名:streamlit_drawable_canvas-0.5.1-py3-none-any.whl 资源来源:官方 安装方法:https://lanzao.blog.csdn.net/article/details/101784059
判断浏览器是否支持canvas,具体代码如下: 复制代码代码如下: <!DOCTYPE html> <head> <meta charset=utf-8 /> <title>canvas</title> [removed] [removed] = function(){ /**判断...
通过HTML5+Canvas开发详解(第2版),你将学到如何使用Canvas进行绘图、渲染文字、处理图像、创建动画,而这些是开发交互式Web游戏的必备知识。 本书针对Canvas和HTML5技术的最新变动进行了更新,其中包含了大量清晰...
HTML5 Canvas 经典学习教程, HTML5 Canvas 经典学习教程-HTML5 Canvas Study,HTML5 Canvas Study,HTML5 Canvas Study
wxml-to-canvas 小程序内通过静态模板和样式绘制 canvas ,导出图片,可用于生成分享图等场景