HTML canvas createLinearGradient() 方法

来源：互联网发布：小区物业管理系统源码编辑：程序博客网时间：2024/06/05 03:46

本文参考菜鸟教程网做的整理笔记

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>HTML5 之颜色渐变(runoob.com)</title> </head><body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。</canvas><br/><canvas id="myCanvas1" width="200" height="100" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。</canvas><script>var c=document.getElementById("myCanvas");/*getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性*/var ctx=c.getContext("2d");// Create gradient/*渐变从(0,0)到(180,0)即横向渐变，横坐标0处是红色横坐标180处是黄色，由红色向黄色过渡。*/var grd=ctx.createLinearGradient(0,0,180,0);grd.addColorStop(0,"red");grd.addColorStop(1,"yellow");// Fill with gradientctx.fillStyle=grd;//定义填充方式：渐变ctx.fillRect(10,10,100,100);//设置填充范围var c1=document.getElementById("myCanvas1");var ctx1=c1.getContext("2d");// Create gradient/*渐变从(0,0)到(180,0)即横向渐变，横坐标0处是红色横坐标180处是黄色，由红色向黄色过渡。*/var grd1=ctx1.createLinearGradient(0,0,180,0);grd1.addColorStop(0,"red");grd1.addColorStop(1,"yellow");// Fill with gradientctx1.fillStyle=grd1;//定义填充方式：渐变ctx1.fillRect(10,10,180,100);//设置填充范围</script></body></html>

这里写图片描述

createLinearGradient(0,0,180,0);渐变从(0,0)到(180,0)即横向渐变，横坐标0处是红色横坐标180处是黄色，由红色向黄色过渡。
但是，第一个fillRect(10,10,100,100)设置填充范围100X100，
第二个fillRect(10,10,180,100)设置填充范围180X100，比较两者的区别，其实是就像第一个从第二个处的横坐标0-100处截取的。

阅读全文

0 0