CSS3-canvas绘制线性渐变

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas绘制线性渐变-高级函数</title>
</head>
<body onLoad="draw('canvas')">
<canvas id="canvas" width="1300" height="500" />
<script type="text/javascript">
function draw(id){
	var canvas = document.getElementById(id);
	if (canvas == null)
	return false;
	var context = canvas.getContext('2d');
	context.fillStyle = "#f0f0f0";
	context.fillRect(0, 0, 1300, 500);/*填充矩形背景色*/
	var gl = context.createLinearGradient(0, 0, 1300, 500);/*定义渐变的方向吧,0,0是渐变起点的坐标,300,300是重点的坐标,这样写是一个正方形的对角线渐变。如果是0,0,0,300,则是由上自下的一个垂直渐变*/
	gl.addColorStop(0, 'rgb(155, 0, 255)' );/*指定渐变的颜色额,两个值(offset, color)其中,color值可以有fillstyle的四种一样额形式#十六进制、rgb、rgba、英文单词等都可以,而前边的offset值只可以在0-1之间,是指颜色离开渐变点的偏移量。。addColorStop可以不止两个,可以定义很多次,但是,最少有两个,用以定义开始颜色和结束颜色。而且,开始的偏移值必须为0,结束的偏移值必须为1 ,中间的必须在0-1之间*/
	<!--另外,createLinearGradient和addColorStop一定是紧接着写的-->
	gl.addColorStop(1, 'rgb(255, 0, 255)');
	context.fillStyle = gl;/*fillStyle不止填充颜色一种形式,这里呢,填充渐变是另一种形式,还有填充图像和文字等。但是,这个填充渐变,不是直接写的是,而是用一个变量gl代替context.createLinearGradient的形式,然后style再等于变量gl就可以了*/
	context.fillRect(0, 0, 1300, 500);/*画出要填充的范围*/
	<!--/*---------------------------------------以上为背景的渐变------------------------------------------------*/-->
	var g2 = context.createLinearGradient(0, 0, 0, 400);/*这样是垂直的渐变*/
	g2.addColorStop(0, 'rgba(154, 255, 0, 0.25)');
	g2.addColorStop(0.5, 'rgba(100, 255, 60, 0.35)');
	g2.addColorStop(1, 'rgba(60, 255, 173, 0.55)');
	for (var i=0; i<10; i++){
		context.beginPath();
		context.arc(i * 25, i * 25, i * 25, 0, Math.PI * 2, true);
		context.closePath();
		context.fillStyle = g2;
		context.fill();	
	}
<!--这个效果是先定义一个线性渐变样式,再设置渐变的颜色,这里设置了三个,然后用一个for循环,做出十个圆形,最后填充圆形的样式和颜色-->
}
</script>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端说吧

css笔记 - 张鑫旭css课程笔记之 relative 篇

限制描述:absolute设置了方位值时,这些方位值是相对于position不为static的最近的父元素来定位的。如果父元素设置了relative,方位值就会...

742
来自专栏python3

tkinter -- Scale

创建一个垂直 Scale,最大值为100,最小值为0,步距值为1。这个参数设置也就是 Scale的缺省设置了

893
来自专栏菜鸟前端工程师

html+css学习笔记005-font属性0text属性

1293
来自专栏进击的君君的前端之路

CSS理解之z-index

2324
来自专栏Nian糕的私人厨房

CSS 布局_2 Flex弹性盒

弹性盒,是一种布局方式,当页面需要适应不同的屏幕大小以及设备类型时,它依然能确保元素拥有更恰当的排布行为,弹性盒属于 CSS 3 部分,IE9 以下不支持,现代...

1114
来自专栏Android知识点总结

Android原生绘图之炫酷倒计时

3394
来自专栏HTML5学堂

CSS3 渐变 — 径向渐变

HTML5学堂(码匠):有了解上周CSS3线性渐变的大家想必能很快掌握CSS3的径向渐变,两者的实现方法大同小异,但CSS3的径向渐变比线性渐变稍微复杂些,颜色...

3185
来自专栏章鱼的慢慢技术路

Python中的高级turtle(海龟)作图(续)

3495
来自专栏QQ空间开发团队的专栏

手 Q 人脸识别动画实现详解

当存在多个人脸的时候进行主次脸动画的切换,摄像头移动的时候动画的追踪,多个动画的之间的时序控制等问题,总之,UI 展示加上各种业务逻辑使得这个动画变得异常复杂。

2K4
来自专栏柠檬先生

css3 动画应用 animations 和transtions transform在加上JavaScript 可以实现硬件加速动画。

transitions(过渡) 被应用于元素指定的属性变化时,该属性经过一段时间逐渐的过渡到最终想要的值。   主要包括四个属性:     执行变换的属性:...

23710

扫码关注云+社区

领取腾讯云代金券