介绍 & lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
,& lt; meta charset=癠TF-8"比;
,& lt; title> Title
,& lt; style>
,canvas {
边境才能:1 px solid # ccc;
,}/*,.linearGradient {
,,宽度:400 px;
,,身高:100 px;
,,背景图片:线性渐变(用正确的,粉色,蓝色);
}*/,& lt;/style>
& lt;/head>
& lt; body>
& lt; div 类=發inearGradient"祝辞& lt;/div>
& lt; canvas 宽度=?00“,身高=?00“祝辞& lt;/canvas>
& lt; script>
,var myCanvas =, document.querySelector(& # 39;帆布# 39;);
,var ctx =, myCanvas.getContext (& # 39; 2 d # 39;);
,/* fillStyle & # 39;粉红色# 39;,& # 39;# 000 & # 39;,& # 39;rgb () & # 39;, & # 39; rgba () & # 39; */,/*也可以使用一个渐变的方案了填充矩形*/,/*创建一个渐变的方案*/,/*渐变是由长度的*/,/* x0y0 起始点,x1y1 结束点,确定长度和方向*/,var linearGradient =, ctx.createLinearGradient (100100500400);
,linearGradient.addColorStop(0, & # 39;粉红色# 39;);
,//linearGradient.addColorStop(0.5 & # 39;红色# 39;);
,linearGradient.addColorStop(& # 39;蓝# 39;);=,,ctx.fillStyle linearGradient;
,ctx.fillRect (100100400100);
,/*粉色——在蓝色*/,/*回想线性渐变——在要素,方向,起始颜色,结束颜色,*/,/*通过两个点的坐标可以控制,渐变方向*/& lt;/script>
& lt;/body>
& lt;/html> JavaScript有什么特点
这篇文章将为大家详细讲解有关JavaScript帆布如何绘制渐变颜色的矩形,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
帆布绘制渐变颜色的矩形的具体代码
运行结果如下:
1, js属于一种解释性脚本语言;2,在绝大多数浏览器的支持下,js可以在多种平台下运行,拥有着跨平台特性;3,js属于一种弱类型脚本语言,对使用的数据类型未做出严格的要求,能够进行类型转换,简单又容易上手;4,js语言安全性高,只能通过浏览器实现信息浏览或动态交互,从而有效地防止数据的丢失;5,基于对象的脚本语言,js不仅可以创建对象,也能使用现有的对象。
关于“JavaScript帆布如何绘制渐变颜色的矩形”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看的到。
