从零开始-Canvas

1、颜色、样式和阴影

属性

　　a、fillStyle(设置或返回用于填充绘画的颜色、渐变或模式)

　　　　语法：context.fillStyle = color(颜色值) | gradient(渐变对象，线性或者放射性) | pattern(填充绘图的pattern对象) ;

　　　　定义一个用蓝色填充的矩形

<body>

    //定义一个画布

    <canvas id="myCanvas" width="" height="" style="background:#ccc"></canvas>

    <script>

        //DOM获取到这块画布

        var c=document.getElementById("myCanvas");

        //然后，创建 context 对象

        //getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

        var ctx=c.getContext("2d");

        //填充画布的颜色

        ctx.fillStyle="#0000ff";

        //确定画布的位置和大小

        //四个参数分别为：

        　　//画布在标签的初始x位置

        　　//画布在标签的初始y位置

        　　//画布的长度

        　　/画布的宽度

        ctx.fillRect(,,,);

    </script>

</body>

　　　结果显示：

　　     

　　　　定义从上到下的渐变，作为矩形的填充样式

<body>

    <canvas id="myCanvas" width="" height="" style="background:#ccc"></canvas>

    <script>

        var c=document.getElementById("myCanvas");

        var ctx=c.getContext("2d");

        //创建线性渐变

        //四个参数的含义：

        //渐变开始的点的x坐标

        //渐变开始的点的y坐标

        //渐变结束的点的x坐标

        //渐变结束的点的y坐标

        //提示：请使用该对象作为 strokeStyle 或 fillStyle 属性的值。

        //提示：请使用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。

        var my_gradient=ctx.createLinearGradient(,,,);

        //方法规定 gradient 对象中的颜色和位置。

        my_gradient.addColorStop(,"black");

        my_gradient.addColorStop(,"white");

        ctx.fillStyle=my_gradient;

        ctx.fillRect(,,,);

    </script>

</body>

　　结果显示：

　　　　

　　b、strokeStyle(设置或返回用于笔触的颜色、渐变或模式)

　　　　绘制一个蓝色线条的矩形

<body>

    <canvas id="myCanvas" width="" height="" style="background:#ccc"></canvas>

    <script>

        var c=document.getElementById("myCanvas");

        var ctx=c.getContext("2d");

        ctx.strokeStyle="#0000ff";

        ctx.strokeRect(,,,);

    </script>

</body>

　　结果显示：

　　　　

　　　　绘制一个渐变笔触的矩形框

<body>

    <canvas id="myCanvas" width="" height="" style="background:#ccc"></canvas>

    <script>

        var c=document.getElementById("myCanvas");

        var ctx=c.getContext("2d");

        var gradient=ctx.createLinearGradient(,,,);

        gradient.addColorStop("","magenta");

        gradient.addColorStop("0.5","blue");

        gradient.addColorStop("1.0","red");

        // 用渐变进行填充

        ctx.strokeStyle=gradient;

        ctx.lineWidth=;

        ctx.strokeRect(,,,);

    </script>

</body>

　　结果显示：

　　　　

　　　　绘制一个渐变的字体

<body>

    <canvas id="myCanvas" width="" height="" style="background:#ccc"></canvas>

    <script>

        var c=document.getElementById("myCanvas");

        var ctx=c.getContext("2d");

        ctx.font="30px Verdana";

        // 创建渐变

        var gradient=ctx.createLinearGradient(,,c.width,);

        gradient.addColorStop("","magenta");

        gradient.addColorStop("0.5","blue");

        gradient.addColorStop("1.0","red");

        // 用渐变进行填充

        ctx.strokeStyle=gradient;

        //给context添加字体

        //strokeText有四个参数：

        //第一个参数：文本

        //第二个参数：开始绘制文本的x坐标(相对于画布)

        //第三个参数：开始绘制文本的y坐标(相对于画布)

        //第四个参数：可选，允许的最大文本宽度，以像素计。

        ctx.strokeText("Big smile!",,);

    </script>

</body>

　　结果显示：

　　　　

　　c、shadowColor(设置或返回用于阴影的颜色)

　　　　

　　　　绘制一个带有黑色阴影的蓝色矩形

<body>

    <canvas id="myCanvas" width="" height="" style="background:#ccc"></canvas>

    <script>

        var c=document.getElementById("myCanvas");

        var ctx=c.getContext("2d");

        //设置用于阴影的模糊级别

        ctx.shadowBlur=;

        //设置阴影颜色

        ctx.shadowColor="black";

        ctx.fillStyle="blue";

        ctx.fillRect(,,,);

    </script>

</body>

　　结果显示：

　　　　

　　d、shadowBlur(设置或返回用于阴影的模糊级别)

　　　　具体可以看c、shadowColor(设置或返回用于阴影的颜色)

　　e、shadowOffsetX(设置或返回阴影距形状的水平距离)

　　　　绘制一个矩形，带有向右偏移20像素的阴影(从矩形的left位置比较)

<body>

    <canvas id="myCanvas" width="" height="" style="background:#ccc"></canvas>

    <script>

        var c=document.getElementById("myCanvas");

        var ctx=c.getContext("2d");

        //阴影模糊级别

        ctx.shadowBlur=;

        //阴影横向偏移量

        ctx.shadowOffsetX=;

        //阴影颜色

        ctx.shadowColor="black";

        ctx.fillStyle="blue";

        ctx.fillRect(,,,);

    </script>

</body>

　　结果显示：

　　　　

　　f、shadowOffsetY(设置或返回阴影距形状的垂直距离) 

　　　　具体可以看e、shadowOffsetX(设置或返回阴影距形状的水平距离)

方法

　　a、createLinearGradient()　　创建线性渐变

　　b、createPattern()　　在指定的方向上重复指定的元素

　　　　语法：context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");

　　　　

　　　　在水平和竖直方向重复图像

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

var img=document.getElementById("lamp");

//重复图像

var pat=ctx.createPattern(img,"repeat");


//创建矩形

ctx.rect(,,,);

ctx.fillStyle=pat;

ctx.fill();

　　结果显示：

　　　　

　　c、createRadialGradient()　　创建放射状/环形的渐变

　　　　语法：context.createRadialGradient(x0,y0,r0,x1,y1,r1);

　　　　　　渐变开始圆x，y

　　　　　　渐变开始圆半径

　　　　　　渐变结束圆x，y

　　　　　　渐变结束圆半径　　

　　　　绘制一个矩形，并用放射状/圆形渐变进行填充

<body>

    <canvas id="myCanvas" width="" height="" style="background:#ccc"></canvas>

    <script>

        var c=document.getElementById("myCanvas");

        var ctx=c.getContext("2d");

        //createLinearGradient() 方法创建放射状/圆形渐变对象。

        //渐变可用于填充矩形、圆形、线条、文本等等。

        //提示：请使用该对象作为 strokeStyle 或 fillStyle 属性的值。

        //提示：请使用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。

        var grd=ctx.createRadialGradient(,,,,,);

        grd.addColorStop(,"red");

        grd.addColorStop(,"white");

        // Fill with gradient

        ctx.fillStyle=grd;

        ctx.fillRect(,,,);

    </script>

</body>

　　结果显示：

　　　　

　　d、addColorStop()　　规定渐变对象中的颜色和停止位置

　　　　定义一个从黑到白的渐变，作为矩形的填充样式

var c=document.getElementById('myCanvas');

var ctx=c.getContext('2d');

var grd=ctx.createLinearGradient(,,,);

grd.addColorStop(,"black");

grd.addColorStop(,"white");

ctx.fillStyle=grd;

ctx.fillRect(,,,);

　　结果显示：

　　　　

　　　　

从零开始 —— Canvas（一）的更多相关文章

  1. 【读书笔记《Android游戏编程之从零开始》】12.游戏开发基础（Canvas 画布）

    1.Canvas 画布 画布类 Canvas 封装了图形和图片绘制等内容,此类常用的函数说明如下: drawColor(int color) 作用:绘制颜色覆盖画布,常用于刷屏 参数:颜色值,也可用十 ...

  2. 【30分钟学完】canvas动画|游戏基础(2)：从零开始画画

    前言 上篇主要是理论的概述,本篇会多些实践,来讲讲canvas的基础用法,并包含一些基础三角函数的应用,推荐没有canvas基础的朋友阅读,熟悉的朋友可以跳过. 本人能力有限,欢迎牛人共同讨论,批评指 ...

  3. 从零开始手把手教你使用javascript+canvas开发一个塔防游戏01地图创建

    项目演示 项目演示地址: 体验一下 项目源码: 项目源码 代码结构 本节做完效果 游戏主页面 index.html <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  4. 赠书：HTML5 Canvas 2d 编程必读的两本经典

    赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...

  5. 原创：从零开始，微信小程序新手入门宝典《一》

    为了方便大家了解并入门微信小程序,我将一些可能会需要的知识,列在这里,让大家方便的从零开始学习:一:微信小程序的特点张小龙:张小龙全面阐述小程序,推荐通读此文: 小程序是一种不需要下载.安装即可使用的 ...

  6. 一个「学渣」从零开始的Web前端自学之路

    从 13 年专科毕业开始,一路跌跌撞撞走了很多弯路,做过餐厅服务员,进过工厂干过流水线,做过客服,干过电话销售可以说经历相当的“丰富”. 最后的机缘巧合下,走上了前端开发之路,作为一个非计算机专业且低 ...

  7. 从零开始学 Web 之 HTML5（一）HTML5概述，语义化标签

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  8. canvas框架：：createjs入门

    createjs是一个轻量级的框架,稍微有点时间和耐心,就可以把全部源代码都看一遍,毕竟只有三十几个js文件.地址:http://www.createjs.com/ 开发createjs的动画或游戏, ...

  9. canvas实现有递增动画的环形进度条

    哈?标题不知道啥意思? 老规矩,直接看图! 效果如下: 高清大图! 码农多年,老眼昏花,动图看不清?!那就看静态截图!!! 不同分值效果如下:          看完了卖家秀,我们来看产品的制作过程吧 ...

随机推荐

  1. PyTorch in Action: A Step by Step Tutorial

    PyTorch in Action: A Step by Step Tutorial   PyTorch in Action: A Step by Step Tutorial Installation ...

  2. GoldenGate HANDLECOLLISIONS参数使用说明

    HANDLECOLLISIONS在官方文档上的说明: 使用HANDLECOLLISIONS和NOHANDLECOLLISIONS参数来控制在目标上应用SQL时,Replicat是否尝试解决重复记录和缺 ...

  3. window.onload

    window.onload事件 window.onload  = function ()  { JS代码块} 当页面中的DOM节点(元素)都加载完的时候执行的JS代码

  4. Xgboost_sklearn代码Demo

    Demo: 显示特征的重要程度:图形化展示: from numpy import loadtxt from xgboost import XGBClassifier from xgboost impo ...

  5. KVO的使用二：常用方法及小技巧

    (文章及代码接上一篇) options详解: KVO的注册方法中有一个options枚举,用来确定观察者的接收消息方法接收的信息,那么具体有什么关联呢?下面通过一段代码来验证是如何关联的.依次选择op ...

  6. Spring中三种编程式事务的使用

    引入事务管理器 @Autowired TransactionTemplate transactionTemplate; @Autowired PlatformTransactionManager tr ...

  7. Python Iterables Iterators Generators

    container 某些对象包含其它对象的引用,这个包含其它对象引用的对象叫容器.例如list可以包含int对象,或者由其它数据类型(或数据结构)的对象组成一个list. 对其他对象的引用是容器值的一 ...

  8. 16: vue + crypto-js + python前后端加密解密

    1.1 vue中使用crypto-js进行AES加密解密    参考博客:https://www.cnblogs.com/qixidi/p/10137935.html 1.初始化vue项目 vue i ...

  9. dataguard主库删除归档日志后从库恢复的方法

    ------------------方法1在主库上使用备份的进行恢复丢失的归档日志-------------------------1.发现主库备份后删除了归档,但是这些归档从库还没应用,也没有传到从 ...

  10. Linux性能优化-理解平均负载

    1 平均负载含义 当系统变慢的时候,我们一般使用 top 或 uptime 命令来查看系统平均负载情况. 正确定义:单位时间内,系统中处于可运行状态和不可中断状态的平均进程数.错误定义:单位时间内的c ...