从零开始-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. 安装mysql5.6

    1.创建一个不能登录的的用户: 2.下载一个数据库包: wget 下载网址 3.安装相关依赖包: yum -y install make gcc-c++ cmake bison-devel ncurs ...

  2. nginx和php-fpm的进程启停重载总结

    nginx和php-fpm对于-USR2.-HUP信号的处理方式不一样: TERM, INT(快速退出,当前的请求不执行完成就退出) QUIT (优雅退出,执行完当前的请求后退出) HUP (重新加载 ...

  3. 腾讯这套SpringMvc面试题你了解多少？（面试必备）

    1.什么是 SpringMvc? 答:SpringMvc 是 spring 的一个模块,基于 MVC 的一个框架,无需中间整合层来整 2.Spring MVC 的优点: 答: 1)它是基于组件技术的. ...

  4. 算法（第四版）C# 习题题解——1.3

    写在前面 整个项目都托管在了 Github 上:https://github.com/ikesnowy/Algorithms-4th-Edition-in-Csharp 这一节内容可能会用到的库文件有 ...

  5. mongodb副本集基于centos7部署

    安装mongodb,基于端口的安装三个节点 下载安装MongoDB安装包 wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel ...

  6. md5 collision（md5碰撞）之记录一些MD5值

    md5 collision之记录一些MD5值   “Magic Hash”的PHP漏洞可以使得攻击者非法获取用户的账号信息.   漏洞原因: PHP以一种特定的方式处理被哈希的字符串,攻击者可以利用其 ...

  7. iperf详细使用方法

    Iperf  是一个网络性能测试工具.Iperf可以测试TCP和UDP带宽质量.Iperf可以测量最大TCP带宽, 具有多种参数和UDP特性.Iperf可以报告带宽,延迟抖动和数据包丢失. Iperf ...

  8. ionic3开发环境的搭建 记录！

    总的来说都很顺利,毕竟已经打包成功在手机上面跑起来了,给的两个教程很给力,基本没有误差,照着步骤敲没问题,打包命令有所更新目前已修正,吃一堑长一智下面说下其中遇到的问题:1.第一点是ionic ser ...

  9. jQuary学习の五のAJAX

    AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新. 一.jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法. loa ...

  10. git checkout --ours 【学习笔记】

    用新分支:git checkout --theirs 文件用master分支:git checkout --ours 文件 执行之后git add