JavaScript canvas绘制渐变颜色的矩形

本文实例为大家分享了canvas绘制渐变颜色的矩形的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
  canvas {
   border: 1px solid #ccc;
  }
/*  .linearGradient{
   width: 400px;
   height: 100px;
   background-image: linear-gradient(to right,pink,blue);
  }*/
 </style>
</head>
<body>
<div class="linearGradient"></div>
<canvas width="600" height="400"></canvas>
<script>
 var myCanvas = document.querySelector('canvas');
 var ctx = myCanvas.getContext('2d');
 /*fillStyle 'pink' '#000' 'rgb()' 'rgba()' */
 /*也可以使用一个渐变的方案了填充矩形*/
 /*创建一个渐变的方案*/
 /*渐变是由长度的*/
 /*x0y0 起始点 x1y1 结束点 确定长度和方向*/
 var linearGradient = ctx.createLinearGradient(100,100,500,400);
 linearGradient.addColorStop(0,'pink');
 //linearGradient.addColorStop(0.5,'red');
 linearGradient.addColorStop(1,'blue');
 ctx.fillStyle = linearGradient;
 ctx.fillRect(100,100,400,100);
 /*pink---->blue*/
 /*回想线性渐变---->要素 方向 起始颜色 结束颜色 */
 /*通过两个点的坐标可以控制 渐变方向*/
</script>
</body>
</html>

运行结果如下:

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js+canvas绘制矩形的方法

    js+canvas绘制矩形的方法

    本文实例讲述了js+canvas绘制矩形的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

  • js绘制圆形和矩形的方法

    js绘制圆形和矩形的方法

    本文实例讲述了js绘制圆形和矩形的方法.分享给大家供大家参考.具体如下: 这里使用js来绘制圆形和矩形,支持选择图形的背景颜色,同时可设置圆角矩形.半径.正圆.矩形.正方形这几个选项.或许这些图形你不需要,但重要的是让你学会JavaScript绘制图形的方法,这是要表达的核心. 运行效果如下图所示: 具体代码如下: <!doctype html> <html> <head> <title>js来绘制圆形和矩形</title> <style&

  • JS多个矩形块选择效果代码(模拟CS结构)

    "> 大屏屏幕 /css/font.css" rel="stylesheet" type="text/css" /> var canChange = 1; var candraw = 1; function main_mouseup() { candraw = 0; } function init() { var aDivs = document.getElementsByTagName("div"); for (

  • AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】

    本文实例讲述了AngularJS实现的鼠标拖动画矩形框.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> html {color: #000;overflow-y: scoll;overflow: -moz-scrol

  • js+html5实现canvas绘制简单矩形的方法

    本文实例讲述了js+html5实现canvas绘制简单矩形的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not sup

  • javascript 绘制矩形框

    如果不考虑把整个代码封装起来, 大约5分钟里也可以写出类似的效果,为了把整个代码封装成一个对象,稍微借鉴了Pro Javascript Techniques书中的代例子的风格.Pro Javascript Techniques书中推荐的drag and drop 例子:http://boring.youngpup.net/2001/domdrag Rect var Rect = { //当前正在画的矩形对象 obj: null, //画布 container: null, //初始化函数 ini

  • javascript实现通过表格绘制颜色填充矩形的方法

    本文实例讲述了javascript实现通过表格绘制颜色填充矩形的方法.分享给大家供大家参考.具体如下: <html> <head> <title> Javascript画矩形 </title> <script type="text/javascript"> //定义函数,传入设置参数,返回一个有背景颜色的表格 function drawFilledRect(x,y,w,h,color) { document.write(&qu

  • JavaScript canvas绘制渐变颜色的矩形

    JavaScript canvas绘制渐变颜色的矩形

    本文实例为大家分享了canvas绘制渐变颜色的矩形的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc; } /* .linearGradient{ wi

  • JavaScript+html5 canvas绘制渐变区域完整实例

    JavaScript+html5 canvas绘制渐变区域完整实例

    本文实例讲述了JavaScript+html5 canvas绘制渐变区域的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> #canvas { border:3px solid gray; } </style> </head&

  • JavaScript Canvas绘制六边形网格

    JavaScript Canvas绘制六边形网格

    本文实例为大家分享了JavaScript Canvas绘制六边形网格的具体代码,供大家参考,具体内容如下 使用Canvas绘制六边形网格. 主要思路是先画给定中心点的六边形,然后二重循环遍历所有中心点,画所有的六边形. <!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="300" height="150">     <p>

  • JavaScript canvas绘制动态圆环进度条

    JavaScript canvas绘制动态圆环进度条

    本文实例为大家分享了JavaScript canvas绘制动态圆环进度条的具体代码,供大家参考,具体内容如下 由于使用的是vue开发,所以就展示一下绘制函数好了,上图是效果图 drawMain(drawing_elem, percent, forecolor, bgcolor) {             /*                 @drawing_elem: 绘制对象                 @percent:绘制圆环百分比, 范围[0, 100]            

  • JavaScript canvas绘制圆形加载进度条

    JavaScript canvas绘制圆形加载进度条

    本文实例为大家分享了JavaScript canvas绘制圆形加载进度条的具体代码,供大家参考,具体内容如下 1.需求:通过canvas绘制一个圆形的进度条 2.实现思路: 2.1 绘制灰色底框 2.2 创建变量保存结束角度值和加载进度值 2.3 创建定时绘制进度条 2.3.1 修改结束角度2.3.2 开始新路径绘制2.3.3 绘制加载圆环 3.实现过程如下: css样式设置 body {             text-align: center;         }         can

  • 详解JavaScript+Canvas绘制环形进度条

    详解JavaScript+Canvas绘制环形进度条

    目录 效果图 思考 实现思路 具体代码实现 效果图 思考 移动端的场景里经常会出现环形进度条的功能,在实现这个功能前,我预想的解决方案大致有: echarts.antv.canvas.svg 前面两种第三方提供的解决方案当然是简单,拿到案例修整一下即可,但是需要下载依赖,而且代码量不小.有没有不需要依赖第三方包,采用原生的写法,独立封装成一个组件,降低耦合,而且性能优越? 当然,那就主要介绍canvas的使用 实现思路 可以展示整个圆.半圆以及任意角度弧形(左右对称)的进度条.整体思路如下: 1

  • JavaScript Canvas绘制动态线框效果

    JavaScript Canvas绘制动态线框效果

    本文实例为大家分享了JavaScript Canvas绘制动态线框效果的具体代码,供大家参考,具体内容如下 本周项目,移动端页面开发,要求丰富的动效,主要技术实现 Canvas :其中绘制动态线框,走了点弯路,所谓的弯路是逻辑问题,非技术实现方式. 一.涉及技术点,具体如下: 1.html 中引入canvas 标签,设置宽高: <canvas id="canvas" width=xx height=xx>您的浏览器不支持canvas,请更换版本</canvas>

  • JavaScript canvas绘制圆弧与圆形

    本文实例为大家分享了canvas绘制圆弧与圆形的具体代码,供大家参考,具体内容如下 canvas 绘制圆弧 绘制圆弧使用 context.arc( ) 函数,包含六个参数. context.arc( centerx,centery,radius, startingAngle,endingAngle, anticlockwise = false ) 分别代表:圆心 x 值,圆心 y 值,半径,开始的弧度值,结束的弧度值,(是否逆时针). 例如: window: onload = function(

  • JavaScript canvas绘制折线图

    JavaScript canvas绘制折线图

    本文实例为大家分享了canvas绘制折线图的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc; } </style> </head&g

  • JavaScript Canvas绘制圆形时钟效果

    JavaScript Canvas绘制圆形时钟效果

    本文实例为大家分享了Canvas时钟效果展示的具体代码,供大家参考,具体内容如下 <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> canvas{ display: block; margin: 0 auto; background-color: #fdffad; border: 1px solid #0

随机推荐