从零开始-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. react-native 导航器 react-navigation 3.x 使用

    React-navigation 介绍 React Navigation 源于 React Native 社区对一个可扩展且易于使用的导航解决方案的需求,它完全使用 JavaScript 编写. (如 ...

  2. 我最喜欢的Mybatis 3.5新特性！超实用！

    Mybatis 3.5 发布有段时间了,终于支持了 Optional ,这么实用的特性,竟然还没人安利……于是本文出现了. 新特性比较简单,但非常实用,因为能大量简化恶心的判空代码. WARNING ...

  3. 18B20驱动小经验

    在写命令时P14拉高在最后 在读命令时P14在拉低后拉高

  4. 富文本编辑器Quill(一)简单介绍

    Quill是一个很流行的富文本编辑器,github上star大约21k: github:https://github.com/quilljs/quill/ 官网: https://quilljs.co ...

  5. Oracle使用——数据泵导入导出数据库——impdp/expdp使用

    使用前提 EXPDP和IMPDP只可以在Oracle服务端使用. EXP导出的文件只可以使用IMP导入,不适用于IMPDP导入文件:EXPDP导出的文件只可以使用IMPDP导入,而不适用于IMP导出文 ...

  6. Bigger-Mai 养成计划，Python基础巩固一

    本日复习内容 Py2与Py3的区别:Py2:print()直接写字符串,不用加括号Py3:print()必须加括号,某些库改名了.还有谁不支持Py3:Twisted:具体能感知的大改动并不多 老生常谈 ...

  7. Bytom BIP-32协议和BIP-44协议

    我们知道HD(分层确定性)钱包,基于 BIP-32:多币种和多帐户钱包,基于 BIP-44:最近比原社区的钱包开发者对比原的BIP-32和BIP-44协议有疑问,所以我今天就专门整理了一下该协议的内容 ...

  8. DRF认证组件流程分析

    视图函数中加上认证功能,流程见下图 import hashlib import time def get_random(name): md = hashlib.md5() md.update(byte ...

  9. 从Scratch到Python——Python生成二维码

    # Python利用pyqrcode模块生成二维码 import pyqrcode import sys number = pyqrcode.create('从Scratch到Python--Pyth ...

  10. pytest-xdist分布式执行测试用例

    前言 平常我们手工测试用例非常多时,比如有1千条用例,假设每个用例执行需要1分钟.如果一个测试人员执行需要1000分钟才能执行完,当项目非常紧急的时候,我们会用测试人力成本换取时间成本,这个时候多找个 ...