绘制

1.坐标系统:

canvas的坐标以左上角为原点,如图

可对canvas的坐标系统进行变换,变换的方式有

  • 平移translate
  • 旋转rotate
  • 缩放scale
  • 创建自定义的变换方式,切变

2.矩形的绘制

API:

  • 清除:clearRect(double x , double y, double w,double h); //x,y是坐标位置,w,h是宽高
  • 描边:strokeRect(double x ,double y ,double w ,double h);

--------strokeStyle,lineWidth,lineJoin,miterLimit

  • 填充:fillRect(double x,double y,double w,double h);

示例:http://runjs.cn/code/ibcpa7fm

var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"); context.font = "14px Microsoft YaHei";
context.fillText("Click to Erase",200,15) context.fillStyle = "#bc223d";
context.fillRect(50,50,100,20); //context.lineJoin = "round";
context.lineWidth = 1;
context.strokeStyle = "green";
context.strokeRect(50,10,100,20); canvas.onmousedown = function(){
context.clearRect(0,0,canvas.width,canvas.height);
}

3.渐变色与图案

3.1渐变色

canvas支持线性渐变(linear)和放射渐变(radial)

API

方法

描述

CanvasGradient.createLinearGradient(double x0,double y0,double x1,double y1);

创建线性渐变;参数表示线性渐变的两个端点.返回CanvasGradient实例,可通过CanvasGradient.addColorStop()方法来向线性渐变增加颜色停止点.

CanvasGradient.createRadialGradient(double x0,double y0,double r0,double x1,double y1,double r1);

创建放射渐变.参数表示位于圆锥形变区域两端的圆形.返回CnvasGradient实例.

示例:http://runjs.cn/code/mdh08l1c

var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d");
var gradient = context.createLinearGradient(0,0,canvas.width,0);
gradient.addColorStop(0,"blue");
gradient.addColorStop(0.25,"#bc223d");
gradient.addColorStop(0.5,"#eaeaea");
gradient.addColorStop(0.75,"#bc223d");
gradient.addColorStop(1,"blue");
context.fillStyle = gradient;
//context.fillRect(0,0,canvas.width,canvas.height);
context.rect(0,0,canvas.width,canvas.height);
context.fill();
//2.放射渐变
var radialGradient = context.createRadialGradient(canvas.width/2,canvas.height,10,canvas.width/2,0,100);
radialGradient.addColorStop(0,"rgba(0,0,255,0.5)");
radialGradient.addColorStop(0.5,"rgba(255,0,255,0.9)");
radialGradient.addColorStop(1,"#bc223d");
context.fillStyle = radialGradient;
context.fillRect(0,0,canvas.width,canvas.height);

3.2 图案

  先上示例:http://runjs.cn/code/zzipqao3

API

方法

描述

CanvasPattern createPattern(HTMLImageElement | HTMLCanvasElement | HTMLVideoElement image,DOMString repetition)


第一个参数为指定的类型图案,第二个参数为如何重复该图案.值为repeat,no-repeat,repeat-x,repeat-y

Core Canvas–Day1的更多相关文章

  1. OpenHarmony 3.1 Beta版本关键特性解析——OpenHarmony图形框架

    (以下内容来自开发者分享,不代表 OpenHarmony 项目群工作委员会观点) 李煜 华为技术有限公司 崔坤华为技术有限公司 众所周知,动画是系统和应用与用户交互的重要环节.动画效果的好坏会直接影响 ...

  2. myeclipse 无法启动 java.lang.IllegalStateException: Unable to acquire application service. Ensure that the org.eclipse.core.runtime bundle is resolved and started (see config.ini).

    把myeclipse10 按照目录完整拷贝到了另外一台电脑, 另外的目录 原安装目录 D\:\soft\i\myeclipse10 新安装目录 E\:\soft\myeclipse10 双击启动失败, ...

  3. .Net Core[译文]

    新文档 /* GitHub stylesheet for MarkdownPad (http://markdownpad.com) */ /* Author: Nicolas Hery - http: ...

  4. html5 canvas 圆形抽奖的实例

    年底没啥,抽空学习了canvas,写了个html5抽奖的代码,造了个轮子,有用的童鞋可以拿走. 其中,canvas.onclick触发抽奖行为,概率可以在core.lottery()函数上添加,美化也 ...

  5. Spark Tungsten揭秘 Day1 jvm下的性能优化

    Spark Tungsten揭秘 Day1 jvm下的性能优化 今天开始谈下Tungsten,首先我们需要了解下其背后是符合了什么样的规律. jvm对分布式天生支持 整个Spark分布式系统是建立在分 ...

  6. 学习《Spring 3.x 企业应用开发实战》Day-1

    Day-1 记录自己学习spring的笔记 提要:根据<Spring 3.x 企业应用开发实战>开头一个用户登录的例子,按照上面敲的. 1.项目分层

  7. python 全栈开发之路 day1

    python 全栈开发之路 day1   本节内容 计算机发展介绍 计算机硬件组成 计算机基本原理 计算机 计算机(computer)俗称电脑,是一种用于高速计算的电子计算机器,可以进行数值计算,又可 ...

  8. Day1 - Python基础1 介绍、基本语法、流程控制

    Python之路,Day1 - Python基础1   本节内容 Python介绍 发展史 Python 2 or 3? 安装 Hello World程序 变量 用户输入 模块初识 .pyc是个什么鬼 ...

  9. 基于HTML5 Canvas的线性区域图表教程

    之前我们看到过很多用jQuery实现的网页图表,有些还是比较实用的.今天我们来介绍一款基于HTML5 Canvas的线性区域图表应用,这个图表应用允许你使用多组数据来同时展示,并且将数据结果以线性图的 ...

随机推荐

  1. poj1087 A Plug for UNIX & poj1459 Power Network (最大流)

    读题比做题难系列…… poj1087 输入n,代表插座个数,接下来分别输入n个插座,字母表示.把插座看做最大流源点,连接到一个点做最大源点,流量为1. 输入m,代表电器个数,接下来分别输入m个电器,字 ...

  2. tcpclient 类

    1. 构造函数 1) 类对象将套接字与本地系统地址和一个随机的tcp端口号进行绑定. 在默认的tcpclient 对象创建后,必须使用connect方法与远程设备连接. TcpClient tc = ...

  3. Notepad++中的颜色属性大全

    Indent guideline style  缩进参考线的颜色 Brace highlight style 鼠标指针在框架左右时框架的颜色(如css中{}   js中的()) Bad brace c ...

  4. iOS Xcode的快捷键

    将一些搜集和经常使用的快捷键记录下来,方便你我. Command +1~ 8: 跳转到导航区的不同位置 Command +0 :显示/隐藏导航区 Command Alt 1~ 6:在不同检测器之间跳转 ...

  5. Java-Web监听器

    在WEB端实现监听实质: 实现一系列的监听接口(实现相应的接口,覆写各接口中相应的方法,在相应的事件触发的时候会执行自己的监听器中的覆写的方法,在各个方法中完成自己想要的操作,从而实现了监听) 监听- ...

  6. 关于angular的ng-class条件判断

    angular的ng-class的多条件判断是非常好用的,不需要写过多的判断去更改他相应的class, 但大家要记住,在repeat中使用ng-class多条件判断时, 错误写法:<i clas ...

  7. myeclipse中使用gradle开发项目

    gradle可以直接使用maven的代码库,并且支持编程,可以说是maven的加强版.今天我们学习下,如何在MyEclipse下使用gradle开发项目.我们的开发环境:myeclipse 2015, ...

  8. centos 7 修改主机名称

    hostnamectl --static set-hostname <host-name> 参考资料 http://www.centoscn.com/CentOS/config/2014/ ...

  9. SilkTest天龙八部系列4-ChildWin

    一直觉得SilkTest的ChildWin不好理解,今天大致看了一下,其实它和DialogBox每啥区别,也是一种window类型.帮助里面说,典型的ChildWin就是文档窗口.在Windows上, ...

  10. CSS3超酷移动手机滑动隐藏側边栏菜单特效

    这是一组共4种效果很炫酷的CSS3移动手机滑动隐藏側边栏菜单特效. 这四种效果各自是:默认的点击滑动側边栏菜单效果.带3D transforms的滑动側边栏效果.文字缩放和淡入淡出效果的滑动側边栏以及 ...