HTML5图片怎么添加渐变,HTML5 canvas图和实现填充渐变形状

本篇教程探讨了HTML5 canvas图和实现填充渐变形状，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

填充渐变形状

window.addEventListener(‘load‘,eventWindowLoaded,false);

function eventWindowLoaded(){

canvasApp();

}

function canvasSupport(){

return Modernizr.canvas;

}

function canvasApp(){

if(!canvasSupport()){

return;

}else{

var theCanvas = document.getElementById(‘canvas‘)

var context = theCanvas.getContext("2d")

}

drawScreen();

function drawScreen(){

//水平渐变值必须保持为0

var gr = context.createLinearGradient(0,0,100,0);

//添加颜色端点

gr.addColorStop(0,‘rgb(255,0,0)‘);

gr.addColorStop(.5,‘rgb(0,255,0)‘);

gr.addColorStop(1,‘rgb(0,0,255)‘);

//应用fillStyle生成渐变

context.fillStyle = gr;

context.fillRect(0,0,100,100);

}

你的浏览器无法使用canvas

小白童鞋；你的支持是我最大的快乐！！

在画布上创建渐变填充有两个基本选项：线性或者径向。线性渐变创建一个水平、垂直或者对角线的填充图案。径向渐变自中心店穿件一个放射状填充

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！

HTML5图片怎么添加渐变,HTML5 canvas图和实现填充渐变形状相关推荐

Html5图片翻页制作,HTML5超酷名片盒风格3D翻页图片画廊
在前面我们讲解了一个使用纯CSS制作3D百叶窗效果,今天我们要来制作一个类似名片盒的3D翻页图片画廊.在这个效果中,我们将使用一个HTML5 range输入框元素来控制图片画廊的前后翻页.这个rang ...
html5给文字添加拼音,html5给汉字加拼音加进度条的实现代码
小编项目上最近设计有个新需求,要给汉纸加拼音,类似于加英文底部小标题类似,毕竟现在咱们中文之博大,大家都在学习和使用中文.下面就让我们学习一下吧,h5现在已经很强大足以应付很多需求. 一.给汉字加拼音 ...
html5 图片羽化,课题：html5图像羽化（不规则区域羽化，feather，html5羽化）
下午搜索了一堆相关文章,没有找到符合要求的. 对一张图片应用不规则区域的羽化,该怎么做呢? 首先去查了下羽化的原理,然而没有什么用, 然后就开始从表现层去研究怎么模拟? idea 1: blur滤镜 ...
HTML5图片旋转并保存,html5图像旋转、缩放并上传
普通 css 的旋转缩放只是样式发生旋转,图片本质上还是没有旋转缩放的,想要图片本质旋转或者缩放,需要借助 canvas 的图像生成能力以图像旋转 90 度并且缩放 0.5 倍为例思路获取图片元素 ...
html5图片文字环绕效果,HTML5实现Word中文字全环绕图片效果
实现这个功能是当时看见数字报的展示出来的编排方式,就是图片+热点,而且下载打开还是PDF的,让我这个WP用户咋个看.想实现Word中的编排方式,也需要浏览器支持Word插件,火狐.谷歌.Opera这些 ...
如何让图片自动旋转html5,图片旋转特效纯HTML5+CSS3制作图片旋转
transform的四个属性: ①旋转--->rotate(参数a),单位deg,表示旋转角度,正数顺时针,负数逆时针. ②缩放--->scale(参数a),单位1,也就是"没有 ...
html5图片与文字垂直对齐
html5图片与文字垂直对齐如图:效果如下原理:在图片旁边放上文字使其垂直对齐,有几种办法 1.定位:使用绝对定位相对定位可以很容易办到 2.b标签是行内元素,使其变为块元素再用margin的办法 ...
jquery手写轮播图_15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
图片怎么转为html5,将图片转化为矢量并canvas化的容易工具(基于Node.js + HTML5 canvas)...
将图片转化为矢量并canvas化的简单工具(基于Node.js + HTML5 canvas) 一.前言最近需要做一个图标的矢量化,但是没有数据,因此采用了node.js作为数据处理工具,canva ...

HTML5图片怎么添加渐变,HTML5 canvas图和实现填充渐变形状

HTML5图片怎么添加渐变,HTML5 canvas图和实现填充渐变形状相关推荐

最新文章

热门文章