HTML5画布
1.创建一个画布
2. 使用 JavaScript 来绘制图像
1.绘制一个矩形
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d"); // getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
ctx.fillStyle="#FF0000"; //填充为红色
ctx.fillRect(0,0,150,75); // fillRect 方法规定了形状、位置和尺寸。
2.绘制线条
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0); //定义线条开始坐标
ctx.lineTo(200,100); //定义线条结束坐标
ctx.stroke(); //使用 stroke() 方法来绘制线条
3.绘制一个圆形
var c2=document.getElementById("myCanvas2");
var cxt2=c2.getContext("2d");
cxt2.fillStyle="#f00";
cxt2.beginPath();
cxt2.arc(70,18,15,0,Math.PI*2,true); // arc(x,y,r,start,stop)
cxt2.closePath();
cxt2.fill(); //实心圆
cxt2.stroke(); //空心圆
4.绘制文本
var c5=document.getElementById("myCanvas5");
var cxt5=c5.getContext("2d");
cxt5.font="30px Arial"; //定义字体
cxt5.fillText("Hello World",10,50); //在 canvas 上绘制实心的文本
cxt5.strokeText("Hello World",10,50); //在 canvas 上绘制空心的文本
5.渐变
createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
var c3=document.getElementById("myCanvas3");
var cxt3=c3.getContext("2d");
var grd=cxt3.createLinearGradient(0,0,150,75); //线条渐变
var grd=cxt3. createRadialGradient (0,0,0,150,75,30); //径向/圆渐变
grd.addColorStop(0,"#f00"); // addColorStop()方法指定颜色停止
grd.addColorStop(1,"#0f0");
cxt3.fillStyle=grd; //设置fillStyle或strokeStyle的值为 渐变
cxt3.fillRect(0,0,175,50); //绘制形状，如矩形，文本，或一条线。
6.图像
var c4=document.getElementById("myCanvas4");
var cxt4=c4.getContext("2d");
var img=new Image();
img.src="canvas.png";
cxt4.drawImage(img,0,0);
1. 颜色、样式和阴影的属性与方法
fillStyle 设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle 设置或返回用于笔触的颜色、渐变或模式
shadowColor 设置或返回用于阴影的颜色
shadowBlur 设置或返回用于阴影的模糊级别
shadowOffsetX 设置或返回阴影距形状的水平距离
shadowOffsetY 设置或返回阴影距形状的垂直距离
createLinearGradient() 创建线性渐变(用在画布内容上)
createPattern() 在指定的方向上重复指定的元素
createRadialGradient() 创建放射状/环形的渐变(用在画布内容上)
addColorStop() 规定渐变对象中的颜色和停止位置
2. 线条样式属性
lineCap 设置或返回线条的结束端点样式
lineJoin 设置或返回两条线相交时，所创建的拐角类型
lineWidth 设置或返回当前的线条宽度
miterLimit 设置或返回最大斜接长度
3. 矩形方法
rect() 创建矩形
fillRect() 绘制“被填充”的矩形
strokeRect() 绘制矩形(无填充)
clearRect() 在给定的矩形内清除指定的像素
4. 路径方法
fill() 填充当前绘图(路径)
stroke() 绘制已定义的路径
beginPath() 起始一条路径，或重置当前路径
moveTo() 把路径移动到画布中的指定点，不创建线条
closePath() 创建从当前点回到起始点的路径
lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条
clip() 从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo() 创建二次贝塞尔曲线
bezierCurveTo() 创建三次方贝塞尔曲线
arc() 创建弧/曲线(用于创建圆形或部分圆)
arcTo() 创建两切线之间的弧/曲线
isPointInPath() 如果指定的点位于当前路径中，则返回 true，否则返回 false
5.转换方法
scale() 缩放当前绘图至更大或更小
rotate() 旋转当前绘图
translate() 重新映射画布上的 (0,0) 位置
transform() 替换绘图的当前转换矩阵
setTransform() 将当前转换重置为单位矩阵。然后运行 transform()
6. 文本属性和方法
font 设置或返回文本内容的当前字体属性
textAlign 设置或返回文本内容的当前对齐方式
textBaseline 设置或返回在绘制文本时使用的当前文本基线
fillText() 在画布上绘制“被填充的”文本
strokeText() 在画布上绘制文本(无填充)
measureText() 返回包含指定文本宽度的对象
7. 图像绘制方法
drawImage() 向画布上绘制图像、画布或视频
8.像素操作属性和方法
width 返回 ImageData 对象的宽度
height 返回 ImageData 对象的高度
data 返回一个对象，其包含指定的 ImageData 对象的图像数据
createImageData() 创建新的、空白的 ImageData 对象
getImageData() 返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据
putImageData() 把图像数据(从指定的 ImageData 对象)放回画布上
9.合成属性
globalAlpha 设置或返回绘图的当前 alpha 或透明值
globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上
《HTML5 CANVAS基础教程》读书笔记
一.HTML5简介 1.HTML5新特性 1)结构元素:section,header,hgroup,footer,nav,article,aside, 2)内容元素:figure,figcaption ...
canvas 基础知识整理(二)
html部分:
canvas 基础知识整理(一)
canvas这个 HTML 元素是为了客户端矢量图形而设计的.它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上. html的基本 ...
canvas基础知识
canvas基础知识 ## CanvasDOM对象 #### 获取绘图环境```canvas.getContext();``` #### 设置宽和高```canvas.width = 500;canv ...
canvas API ，通俗的canvas基础知识(四)
今天要讲的内容是canvas的转换功能,前面的内容没用看的同学可以出门右转,先看看前面的基础知识,废话不多说,开始进入正题吧! 何为转换功能?熟悉css3的同学都知道,css3里面有transform ...
canvas 基础知识
canvas 基础 低版本的ie不支持html5,需要引入excanvas.js来让ie支持canvas. 检测支持canvas
canvas API ，通俗的canvas基础知识(一)
在没学canvas的时候,觉得canvas是这么的神秘,这么的绚丽,这么的高深,用canvas做出来的效果是如此的炫酷,能做的事情如此的宽广,简直让我心生敬畏之心,时常感叹:我要是得此技能,必定要上天 ...
HTML5 <;canvas>; 基础学习
HTML5 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. 标签只是图形容器,您必须使用脚本来绘制图形 创建一个画布( ...
HTML5 canvas准备知识
利用canvas来进行画图工作.因此,我们有必要进行一些画图方面的术语说明. 一.画布 在日常生活中,如果我们要画画,可以找纸.板.画布等等工具.而在网页元素中,我们只需要定义一个标签即可. < ...
随机推荐
customErrors与错误页面
本配置节相对简单而且常用 ...
C++ 之 auto_ptr and shared_ptr
1.auto_ptr 这个所谓的只能指针有点鸡肋! 没有引用计数,而且还有一个所有权转移的情况! 当所有权转移后,以前的auto_ptr将会成为null 2.shared_ptr 增加了引用计数,没 ...
ajax返回值给上层函数的方法。
function load_val(callback){//定义一个回调函数 $.getJSON('test.php' , function(dat){ callback(data);//将返回结果当 ...
nginx负载均衡器处理session共享的几种方法(转)
1) 不使用session,换作cookie 能把session改成cookie,就能避开session的一些弊端,在从前看的一本J2EE的书上,也指明在集群系统中不能用session,否则惹出祸端来 ...
Scrum Meeting---Six(2015-11-1)
说明 由于周五放假,我们团队部分队员回家和外出,所以这一次的Scrum Meeting我们推迟到周日晚上,在周末的这段时间内队员对自己做的任务在周日晚汇报给我. 周末完成任务以及周一计划任务 姓名 周 ...
Android百度地图开发(一)环境搭建
1.百度地图官方API文档下载 版本 使用说明 下载 Android SDK 通用资源下载 提供新版离线地图(百度矢量地图)与旧版离线地图(百度栅格地图)下载. 备注: 自An ...
java+js实现完整的图片展示本地目录demo
java+js实现完整的图片展示本地目录demo 最近的项目满足需要,实现通过一个前端button点击事件,流行音乐浏览下的全部图片: 思路: - 获取到所需展示图片的本地目录内全部图片的文件绝对路径 ...
洛谷P1115 最大字段和【线性dp】
题目:https://www.luogu.org/problemnew/show/P1115 题意: 求给定数组的最大区间和. 思路: $dp[i][0]$表示以1~i的数组,不选i的最大字段和.$d ...
shell中后台进程管理： ps -aux 详解
常用 查找进程id方法: ps -aux | grep "jupyter" 杀进程: kill -9 具体的PID 1.ps命令 要对进 ...
fastdfs 图片服务器 使用java端作为客户端上传图片
之前有说道搭建fastdfs作为图片服务器,但是没有说明如何真正在代码里调用,那么今天大致讲一下,如何使用java客户端进行上传 首先你得要有一个客户端,导入到eclipse中即可 git地址如下: ...
532
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
