从零开始-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. 怎么把Thu Nov 22 2018 10:49:36 GMT+0800转换成正常日期

    this.data //Thu Nov 22 2018 10:49:36 GMT+0800 this.date_of_birth = date.getFullYear() + '-' + (date. ...

  2. git+webpack项目初始化<一>

    目录结构 src + page view image service util git初始化 linux常用命令 rm -rf mmall-fe/ 删除 mkdir mmall-fe 创建文件夹 ls ...

  3. php 加密解密算法 用于数据传输

    /** * 加密方法 * @param string $data 要加密的字符串 * @param string $key 加密密钥 * @param int $expire 过期时间 (单位:秒) ...

  4. C#线程同步（5）- 信号量 Semaphore

    文章原始出处 http://xxinside.blogbus.com/logs/47617134.html 预备知识:C#线程同步(1)- 临界区&Lock,C#线程同步(2)- 临界区&am ...

  5. Android系统修改之Notification布局修改(一)

    源码基于Android4.4 相关布局文件的位置: frameworks/base/core/res目录下: 1. notification_template_base.xml 2. notifica ...

  6. (转) Using the latest advancements in AI to predict stock market movements

    Using the latest advancements in AI to predict stock market movements 2019-01-13 21:31:18 This blog ...

  7. 面试被问之-----sql优化中in与exists的区别

    曾经一次去面试,被问及in与exists的区别,记得当时是这么回答的:''in后面接子查询或者(xx,xx,xx,,,),exists后面需要一个true或者false的结果",当然这么说也 ...

  8. (js) 字符串和数组的常用方法

    JS中字符串和数组的常用方法 JS中字符串和数组的常用方法 js中字符串常用方法 查找字符串 根据索引值查找字符串的值 根据字符值查找索引值 截取字符串的方法 字符串替换 字符串的遍历查找 字符串转化 ...

  9. Vue小项目二手书商城：（一）准备工作、组件和路由

    本项目基于vue2.5.2,与低版本部分不同之处会在(五)参考资料中提出 完整程序:https://github.com/M-M-Monica/bukesi 实现内容: 资源准备(mock数据) 组件 ...

  10. 为wordpress后台登陆添加算术验证码

    对于新建站(个人博客-柠檬https://ninmong.com)的站长来说提高后台的安全性,是一件非常重要的事,添加验证可以起到很好的效果,废话少说,贴代码 //后台登陆数学验证码 function ...