canvas基本用法
1、canvas和其他标签一样使用,但是IE8以下是不支持的,可以在canvas里面加一个span用来提示,例如:
<canvas>
<span>IE8不支持canvas</span>
</canvas>
另外画布的大小,需要直接在内联样式里面设置,而不要在外部样式表里面设置,在外部样式表里设置宽高后,canvas里面的元素也会同比缩放,例如:
<canvas id="c1" width="400" height="400">
<span>IE8不支持canvas</span>
</canvas>
2.画方形
oC.fillRect(x,y,w,h); 4个参数依次为x坐标,y坐标,宽,高。同理边框矩形也是oC.strokeRect(x,y,w,h);
绘图之前可以设置绘图样式:
oGC.fillStyle = 'red';
oGC.strokeStyle = 'blue';
oGC.lineWidth = 10;
oGC.lineJoin = 'bevel';//控制线的边角 miter(默认) round(圆角) bevel(斜角)
3、绘制路径
设置路径的相关方法beginPath() closePath() moveTo() lineTo()
设置好路径后,通过oGc.storke()或者oGc.fill()来绘制
同理也可以在绘制前设置样式,直线还有一个特殊的样式,端点样式oGc.lineCap = 'round' 用的不多
还有两个方法,用来将设置样式值针对某一块代码的oGc.save() oGc.restore().
示例代码:
oGC.save(); oGC.fillStyle = 'red'; oGC.beginPath(); oGC.moveTo(100,100); oGC.lineTo(200,200); oGC.lineTo(300,200); oGC.closePath(); oGC.fill(); oGC.restore(); oGC.beginPath(); oGC.moveTo(100,200); oGC.lineTo(200,300); oGC.lineTo(300,300); oGC.closePath(); oGC.fill();
4、绘制弧形路径
相关方法:oGC.arc(200,200,150,0,90*Math.PI/180,true);参数一次是圆心坐标,半径,起始弧度,结束弧度,是否逆时针方向。
几个绘制其他弧形的方法:
oGC.arcTo(100,100,200,100,100); oGC.quadraticCurveTo(100,100,200,100); oGC.bezierCurveTo(100,100,200,200,200,100); 和贝塞尔曲线相关,用的不多。
5.变换
变换也是有三种translate,scale,rotate
6.插入图片
drawImage(obj,x,y,w,h); 五个参数依次是图片对象,x,y坐标,宽高。由于图片得提前加载好,所以可以利用图片预加载,当图片加载好了之后,在执行往canvas里面插入图片。
7.设置背景
createPattern(obj,'repeat'); 两个参数依次是图片对象和平铺方式。用法如下:
var bg = oGC.createPattern(obj,'repeat');
oGC.fillStyle = bg;
oGC.fillRect(0,0,300,300);
8.渐变
线性渐变:createLinearGradient(x1,y1,x2,y2); 4个参数依次是起始点的坐标,结束点的坐标。用法如下:
var obj = oGC.createLinearGradient(150,100,250,200);
obj.addColorStop(0,'red');
obj.addColorStop(0.5,'yellow');
obj.addColorStop(1,'blue');
oGC.fillStyle = obj;
oGC.fillRect(150,100,100,100);
放射性渐变:createRadialGradient(x1,y1,r1,x2,y2,r2); 参数依次是第一个圆的坐标和半径,第二个圆的坐标和半径。用法如下:
var obj = oGC.createRadialGradient(200,200,100,200,200,150);
obj.addColorStop(0,'red');
obj.addColorStop(0.5,'yellow');
obj.addColorStop(1,'blue');
oGC.fillStyle = obj;
oGC.fillRect(0,0,oC.width,oC.height);
9.添加文字
fillText('你好',x,y); 参数依次是需要添加的文字,以及坐标 strokeText用法一样。
在添加文字之前,需要设置一些文字的样式。例如:
oGc.font = '60px impact'; oGc.textBaseline = 'top'(上下对齐方式)
还可以通过oGc.measureText(str).width;来获取宽度,高度和文字大小相等。综合用法如下:
oGC.font = '60px impact'; oGC.textBaseline = 'top'; //middle bottom var w = oGC.measureText('hello word').width; oGC.fillText('hello word',(oC.width - w)/2,(oC.height - 60)/2);
10.添加阴影
oGc.shadowOffsetX = 10;//偏移量
oGc.shadowColor = 'red'; //阴影颜色
oGc.shadowBlue = 3 //模糊值
canvas基本用法的更多相关文章
- canvas arcTo()用法详解 – CodePlayer
canvas arcTo()用法详解 – CodePlayer canvas arcTo()用法详解
- HTML5 Canvas阴影用法演示
HTML5 Canvas阴影用法演示 HTML5 Canvas中提供了设置阴影的四个属性值分别为: context.shadowColor = “red” 表示设置阴影颜色为红色 context.sh ...
- canvas基础用法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- canvas arcTo()用法详解
CanvasRenderingContext2D对象的方法arcTo()的用法. arcTo(x1, y1, x2, y2, radius) arcTo()方法将利用当前端点.端点1(x1,y1)和端 ...
- html5 canvas基本用法
通过对canvas的初步了解,经过几天的总结,吧canvas的基本用法总结如下:方便以后查阅 <!doctype html> <html> <head> <m ...
- canvas的用法介绍
目录 概述 绘图方法 图像处理方法 drawImage方法 getImageData方法,putImageData方法 toDataURL方法 save方法,restore方法 动画 像素处理 灰度效 ...
- canvas createRadialGradient 用法
径向渐变,就是环形的渐变了,由圆心(或者是较小的同心圆)开始向外扩散渐变的效果,听着有些抽象,往下看图一下子就明白了.线性渐变指定了起点和终点,径向渐变则指定了开始的结束园的圆心和半径.这里使用cre ...
- canvas的用法
包括: 介绍. 基础入门.(兼容性.获取canvas上下文.绘制直线/描边,填充内容.绘制表格.) canvas是基于状态的绘图. 绘制矩形. 绘制圆形. 绘制文本. 绘制图片. 阴影. 渐变. 绘制 ...
- canvas图形处理和进阶用法
前面的话 上一篇博客介绍了canvas基础用法,本文将更进一步,介绍canvas的图形处理和进阶用法 图形变换 图形变换是指用数学方法调整所绘形状的物理属性,其实质是坐标变形.所有的变换都依赖于后台的 ...
随机推荐
- Application Loader上传app程序
提示:如果您安装了XCode开发环境.在/Applications/XCode.app/Contents/Applications目录中可以找到Application Loader(右键XCode选择 ...
- 7个混合式HTML5移动开发框架
在这个时间开始学习移动开发真是最好不过了,每个人应该都有一些移动应用的创意,而且你并不需要任何的原生应用编程经验,你只需要一些HTML的相关知识,懂一些CSS和JavaScript就够了.如果你总听别 ...
- WeX5学习笔记-创建本地APP相关问题
1.在Native新建[创建本地APP]时, "服务地址”为本地IP和端口号,例如本地IP为192.168.253.1,端口号为8080,则设置为http://192.168.253.1:8 ...
- MemcacheQ 安装与使用
MemcacheQ 是一个基于 MemcacheDB 的消息队列服务器.官网地址:http://memcachedb.org/memcacheq/ 特点: 1.简单易用. 2.处理速度快. 3.可创建 ...
- 用C#开发了四天的UWP应用有感
第一个就是异步方法,async-await,所谓async关键字,并没有什么实际上的语法意义,只是写在函数签名的位置让编译器方便进行查找以及静态检查,并且提醒程序员这是一个异步方法而已.至于await ...
- gerrit 修改前一次提交的方法(转载)
From:http://sinojelly.sinaapp.com/2011/08/git-changes-submitted-by-the-previous-method-pay-special-a ...
- Android String操作
android String.valueOf(ch).getBytes("GBK") --------------------------------------------- S ...
- linux 下的clock_gettime() 获取精确时间函数
#include <time.h> int clock_gettime(clockid_t clk_id, struct timespec* tp); clock_gettime() 函数 ...
- 23. Sum Root to Leaf Numbers
Sum Root to Leaf Numbers Given a binary tree containing digits from 0-9 only, each root-to-leaf path ...
- c# webform网站图片另存代码
好辛苦生成了二维码,然后要实现点击“保存图片”,弹出选择路径进行保存的效果. look: string qrcodeurl = ""; string username = &quo ...