Core Canvas–Day1
绘制
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的更多相关文章
- OpenHarmony 3.1 Beta版本关键特性解析——OpenHarmony图形框架
(以下内容来自开发者分享,不代表 OpenHarmony 项目群工作委员会观点) 李煜 华为技术有限公司 崔坤华为技术有限公司 众所周知,动画是系统和应用与用户交互的重要环节.动画效果的好坏会直接影响 ...
- 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 双击启动失败, ...
- .Net Core[译文]
新文档 /* GitHub stylesheet for MarkdownPad (http://markdownpad.com) */ /* Author: Nicolas Hery - http: ...
- html5 canvas 圆形抽奖的实例
年底没啥,抽空学习了canvas,写了个html5抽奖的代码,造了个轮子,有用的童鞋可以拿走. 其中,canvas.onclick触发抽奖行为,概率可以在core.lottery()函数上添加,美化也 ...
- Spark Tungsten揭秘 Day1 jvm下的性能优化
Spark Tungsten揭秘 Day1 jvm下的性能优化 今天开始谈下Tungsten,首先我们需要了解下其背后是符合了什么样的规律. jvm对分布式天生支持 整个Spark分布式系统是建立在分 ...
- 学习《Spring 3.x 企业应用开发实战》Day-1
Day-1 记录自己学习spring的笔记 提要:根据<Spring 3.x 企业应用开发实战>开头一个用户登录的例子,按照上面敲的. 1.项目分层
- python 全栈开发之路 day1
python 全栈开发之路 day1 本节内容 计算机发展介绍 计算机硬件组成 计算机基本原理 计算机 计算机(computer)俗称电脑,是一种用于高速计算的电子计算机器,可以进行数值计算,又可 ...
- Day1 - Python基础1 介绍、基本语法、流程控制
Python之路,Day1 - Python基础1 本节内容 Python介绍 发展史 Python 2 or 3? 安装 Hello World程序 变量 用户输入 模块初识 .pyc是个什么鬼 ...
- 基于HTML5 Canvas的线性区域图表教程
之前我们看到过很多用jQuery实现的网页图表,有些还是比较实用的.今天我们来介绍一款基于HTML5 Canvas的线性区域图表应用,这个图表应用允许你使用多组数据来同时展示,并且将数据结果以线性图的 ...
随机推荐
- poj1087 A Plug for UNIX & poj1459 Power Network (最大流)
读题比做题难系列…… poj1087 输入n,代表插座个数,接下来分别输入n个插座,字母表示.把插座看做最大流源点,连接到一个点做最大源点,流量为1. 输入m,代表电器个数,接下来分别输入m个电器,字 ...
- tcpclient 类
1. 构造函数 1) 类对象将套接字与本地系统地址和一个随机的tcp端口号进行绑定. 在默认的tcpclient 对象创建后,必须使用connect方法与远程设备连接. TcpClient tc = ...
- Notepad++中的颜色属性大全
Indent guideline style 缩进参考线的颜色 Brace highlight style 鼠标指针在框架左右时框架的颜色(如css中{} js中的()) Bad brace c ...
- iOS Xcode的快捷键
将一些搜集和经常使用的快捷键记录下来,方便你我. Command +1~ 8: 跳转到导航区的不同位置 Command +0 :显示/隐藏导航区 Command Alt 1~ 6:在不同检测器之间跳转 ...
- Java-Web监听器
在WEB端实现监听实质: 实现一系列的监听接口(实现相应的接口,覆写各接口中相应的方法,在相应的事件触发的时候会执行自己的监听器中的覆写的方法,在各个方法中完成自己想要的操作,从而实现了监听) 监听- ...
- 关于angular的ng-class条件判断
angular的ng-class的多条件判断是非常好用的,不需要写过多的判断去更改他相应的class, 但大家要记住,在repeat中使用ng-class多条件判断时, 错误写法:<i clas ...
- myeclipse中使用gradle开发项目
gradle可以直接使用maven的代码库,并且支持编程,可以说是maven的加强版.今天我们学习下,如何在MyEclipse下使用gradle开发项目.我们的开发环境:myeclipse 2015, ...
- centos 7 修改主机名称
hostnamectl --static set-hostname <host-name> 参考资料 http://www.centoscn.com/CentOS/config/2014/ ...
- SilkTest天龙八部系列4-ChildWin
一直觉得SilkTest的ChildWin不好理解,今天大致看了一下,其实它和DialogBox每啥区别,也是一种window类型.帮助里面说,典型的ChildWin就是文档窗口.在Windows上, ...
- CSS3超酷移动手机滑动隐藏側边栏菜单特效
这是一组共4种效果很炫酷的CSS3移动手机滑动隐藏側边栏菜单特效. 这四种效果各自是:默认的点击滑动側边栏菜单效果.带3D transforms的滑动側边栏效果.文字缩放和淡入淡出效果的滑动側边栏以及 ...