从零开始-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. Python汉罗塔

    第一步代码: import turtle class Stack: def __init__(self): self.items = [] def isEmpty(self): return len( ...

  2. ROS之坑

    我使用ROS建图的时候,用的是Kinect的深度信息转换成laser scan,Rviz仿真环境调用出laser scan信息的时候显示如下错误: Transform [sender=unknown_ ...

  3. 使用CA签发的服务器证书搭建Tomcat双向SSL认证服务

    第一部分,先说证书的申请. 这步是要到正规的CA公司申请正式的设备证书必须走的步骤. 1.先生成证书的密钥对 打开命令行,切换到某个自己新建的目录下,执行如下命令 keytool -genkey -k ...

  4. HBuilder 模拟器

    模拟器名称    连接默认端口夜神安卓模拟器夜神安卓模拟器     62001逍遥安卓模拟器逍遥安卓模拟器     21503BlueStacks(蓝叠安卓模拟器)BlueStacks(蓝叠安卓模拟器 ...

  5. gitlab备份

    #!/bin/bash backup_date=`date "+%Y_%m_%d"` delete_date=`date +%Y_%m_%d -d "7 days ago ...

  6. 查看mysql中sql语句执行时间

    查看mysql版本:select version();方法一: show profiles.1. Show profiles是5.0.37之后添加的,要想使用此功能,要确保版本在5.0.37之后.  ...

  7. Oracle错误——ORA-39002:操作无效、ORA-39070:无法打开日志文件、ORA-06512:在“SYS.UTL_FILE”,line

    错误 在使用数据泵impdp导入文件时,出现错误,无法导入数据 Next 问题原因 初步猜测,应该是Oracle用户权限出现问题,是对Directory目录无操作权限所致,经过一番修改和测试,发现使用 ...

  8. JS(JavaScript）的进一步了解1（更新中···）

    1.作用域链 作用域:浏览器给JS的一个生存环境(栈内存). 作用域链:JS中的关键字var 和function 都可以提前声明和定义.提前声明和定义的内容放在我们的 内存地址(堆内存)中.然后JS从 ...

  9. MyBatis进阶（四）

    mapper.xml文件的编写 mapper.xml映射文件实现数据库和实体类之间的映射关系,定义操作数据库的sql语句. 主体部分 文件头部 <?xml version="1.0&q ...

  10. Python3学习笔记----生成器

    生成器的作用 生成器可以在循环的过程中推算出后续的元素,不必创建完整的list,从而节省大量空间. 生成器的创建 1.把一个列表生成式的 [ ] 改写为( ) # -*- coding: UTF-8 ...