从零开始-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. 使用session和cookie实现用户登录:一个登录页面,一个servlet,一个登录成功页面

    文件目录 1.登录页面 <%@ page language="java" contentType="text/html; charset=utf-8" p ...

  2. CodeForces - 1102A

    You are given an integer sequence 1,2,-,n1,2,-,n. You have to divide it into two sets AA and BB in s ...

  3. flutter- 圆角

    单个圆角变化 Container( height: 200, decoration: BoxDecoration( color: Colors.green, borderRadius: BorderR ...

  4. Let’s Encrypt 通配符证书申请配置

    首先你可以查看下官方提供的支持申请通配符证书的客户端列表:https://letsencrypt.org/docs/client-options/. 这些客户端支持最新的ACME v2接口,而这个接口 ...

  5. 自制操作系统Antz(9)——实现内核 (下) 实现图形化界面

    Antz系统更新地址: https://www.cnblogs.com/LexMoon/category/1262287.html Linux内核源码分析地址:https://www.cnblogs. ...

  6. 关于C#的Main(String[] args)参数输入问题

    关于C#的Main(String[] args)参数输入问题 指定相关的测试代码 首先,写一个用于测试的关于Main(String[] args)参数输入有关的代码类,如下: using System ...

  7. 破解360doc个人图书馆网站的右键、复制方法

    chrome浏览器如下做法: 右上角菜单按钮→设置→显示高级设置→隐私设置下的 内容设置按钮→javascript下的管理例外情况→添加 [*.]360doc.com 设置为禁止 →完成

  8. openwrt如何关掉防火墙?

    答: 1.  阻止防火墙服务开机自动启动 /etc/init.d/firewall disable 2. 关闭防火墙 /etc/init.d/firewall stop

  9. [亲测有效] - Linux安装PostgreSQL

    本文章来为各位介绍一篇关于postgresql 9.4 在linux环境的安装步骤详解,希望文章能够对各位新手朋友带来帮助的哦.   环境说明系统:centos 6.4 64位软件:postgresq ...

  10. 启动一个SpringBoot的maven项目

    ​ 最近拿到了一个maven项目,原先是使用.net开发的,虽然Java和C#的语法相近,但是难免还有一些差别,包括语言特性,IDE的使用方面,都需要一段时间的习惯和适应. ​ 该项目总体上是前后端分 ...