html5 --- 使用canvas画一个渐变矩形

我们希望得到如下效果:

首先准备画布

// HTML
<canvas width="500" height="375" id ="a"> </canvas>// JS
// 获取画布的DOM元素
var a_canvas = document.getElementById("1");
// 获取画布的上下文元素(之后,就可以使用canvas的特性了)
var ct = a_canvas.getContext("2d");

定义渐变的样式

// JS
var my_gra = ct.createLinearGradient(0, 0, 300, 0);
my_gra.addColorStop(0, "black");
my_gra.addColorStop(1, "white");
// 线从(0, 0) 画到 (300, 0)
// 颜色从黑到白

使用自定义的样式绘制矩阵

// JS
ct.fillStyle = my_gra;
ct.fillRect(0, 0, 300, 225);
// fillRect表示从(0, 0) 开始画一个宽300px,高225px的矩形

整体代码

<canvas width="500" height="375" id="a"></canvas><script>(function draw_a() {var a_canvas = document.getElementById("a");var ct = a_canvas.getContext("2d");var my_gra = ct.createLinearGradient(0, 0, 300, 0);my_gra.addColorStop(0, "black");my_gra.addColorStop(1, "white");ct.fillStyle= my_gra;ct.fillRect(0, 0, 300, 225);})();
</script>

参考《HTML5揭秘》P68

html5 --- 使用canvas画一个渐变矩形相关推荐

[html] 请使用canvas画一个渐变的长方形
[html] 请使用canvas画一个渐变的长方形 // 普通canvas绘图工具类// umd适配多种引入方式 (function(root, factory) {if (typeof define ...
Html5基于Canvas画一个动态时钟
文章目录前言一.前期准备二.绘制刻度 1.流程 2.效果图三.绘制文字 1.流程 2.效果图四.绘制指针 1.取得当前时间 2.绘制秒针 3.绘制分针 4.绘制时针 5.效果图五.绘制圆心 ...
用canvas画一个太极图（八卦图）
用canvas画一个太极图(八卦图) 源码展示链接: https://yanhappiness.github.io/Notes/canvas_src.html 理解什么是canvas canvas是H ...
python程序、画一个笑脸_如何使用canvas画一个微笑的表情（代码示例）
本篇文章给大家带来的内容是关于如何使用canvas画一个微笑的表情(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实习期间让我用canvas画一个表情,比较简单,话不多说 ...
[html] 请使用canvas画一个椭圆
[html] 请使用canvas画一个椭圆 <script> var c=document.getElementById("myCanvas"); var ctx=c. ...
如何利用canvas画一个圆，并且填充颜色
如何利用canvas画一个圆,并且填充颜色(小白专用,大佬勿看) canvas基础相信在此之前,你对canvas已经有一定的了解了,接下来我将介绍,如何利用canvas画一个圆. 1.新建一个htm ...
用canvas画一个五星红旗
利用canvas画一个好看的五星红旗!!! 简单,容易上手! <!DOCTYPE html> <html lang="utf-8"> <meta ht ...
用canvas画一个简易的机器猫头像
用canvas画一个机器猫的头像,原图如下: 代码实现效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <he ...
html 绘制正方形,HTML5之Canvas画正方形
HTML5之Canvas画正方形 1.设计源码 HTML5之Canvas画正方形 function drawFour(id) { //获取canvas元素 var canvas = document. ...

html5 --- 使用canvas画一个渐变矩形

首先准备画布

定义渐变的样式

使用自定义的样式绘制矩阵

整体代码

html5 --- 使用canvas画一个渐变矩形相关推荐

最新文章

热门文章