canvas画布01

一：canvas

１：概述：

　　canvas是H5提供的新标签，其最强大的作用是进行２D图形的绘制，canvas标签仅仅作为绘制图形的载体，它本身并不具备绘制图形的能力，我们是通过canvas元素的自身的一个对象进行绘制图形的。目前提供的也有3D功能，但是只有极少数的浏览器支持，一般不用3D。canvas中的坐标系是平面的。

２：canvas绘制路径

　绘制的步骤：

　（１）：获取canvas元素

　　　　var canvas = document.getElementById("canvas");

　（２）：获取2D渲染上下文对象（核心）

　　　　var content=canvas.getContext("2d");

　（３）：绘制路径

　　　　content.beginPath();//开始路径

content.moveTo(0,0);//设置起点

content.lineTo(300,400);//设置下一个点

content.closePath();//结束路径

content.stroke();//绘制路径

３：设置canvas宽高的方式：

　（１）：直接在标签内设置宽高属性

　　　　<body>

您的浏览器不支持Canvas，请升级浏览器

</canvas>

　 </body>

　（２）：通过js修改宽高

　　　　canvas.width=500;

　 canvas.height=500;

注意：不要用css设置宽高，容易导致图形变形

４：moveTo：创建一条新的子路径

　　lineTo：沿着已有的子路径继续划线，会记录下添加的最后一个点的坐标信息，不断更新子路径的新坐标

　　 closePath：闭合路径，链接最后一个点的位置与起点的位置

　　 lineWidth：线宽,单位是数字，表示像素,位置在描边之前都可以,默认值是1

５：canvas绘制图形有两种：

　（１）：绘制路径

　（２）：绘制图形

　　　ａ：描边图形，带有stroke单词的属性或者方法

　　　ｂ：填充图形，带有fill单词的属性或者方法

６：（１）描边样式：strokeStyle

　可以接受三种类型的值：

a:颜色值：十六进制的颜色、rgb、rgba、颜色单词；

b:用于填充图形的渐变对象

c:用于填充图形的pattern对象

　　（２）填充样式：fillStyle

　　　　可接受的参数与描边一样

　　content.strokeStyle = "blue"; //画笔的颜色

content.fillStyle=“aqua";//填充的颜色

注意：所有有关的样式一旦设置会影响其他所有的绘制图形，描边和填充的样式如果不设置颜色默认都是黑色。

７：绘制矩形的方法：

(1):strokeRect(x,y,w,h);绘制的矩形不填充颜色

　 (2):fillRect(x,y,w,h);绘制已经填充颜色的矩形，默认颜色是黑色

　四个参数：

　　　　x,y:要绘制的矩形的左上的点相对于canvas元素的位置;

　　　　w,h:矩形的宽高;

８：绘制文字

　（１）：font属性：倾斜，文字大小，字体类型（宋体，黑体，stkaiti，）

　（２）：textAlign:设置文本在水平当向上的距离起点的位置

　　　　start：（默认值），文本的左下角距离起点的位置

　 center：文本的下边缘的中心位置距离起点的位置

end：文本的右下角距离起点的位置

（３）：fillText(txt,x,y,maxWidth)

　　　　四个参数：txt:绘制的文本

　　　　　　　　　x,y:绘制的位置

　　　　　　　　　maxWidth:允许文本的最大宽度（一般不设置）

注意：默认情况下，文字大小10px,默认字体类型：sans-serif，不倾斜

９：绘制圆

　绘制圆的方法： arc(x,y,radius,startAngle,endAngle,counterclockwise)

参数： x,y:圆心位置

radius：半径

startAngle：开始位置

endAngle：结束位置

counterclockwise：是否逆时针绘制（true:逆时针绘制；false:顺时针绘制）

注意：开始位置和结束位置上的值是弧度

π＝180度

Math.PI　是JS提供的弧度值，等于π

ps：最后一个参数可以省略，默认为顺时针，但是建议不要省略，如果没有最后一个参数，在火狐的低版本浏览器下会报错

１０：设置阴影

　（１）：shadowBlur 数值，也代表阴影的大小，值越大，越模糊，默认值为0模糊程度

　　　　content.shadowBlur = 10;

　（２）：设置阴影X轴偏移量　数值，（正：向左，负：向右）

　　　　content.shadowOffsetX = 5;

　（３）：设置阴影Y轴偏移量　　数值，（正：向下，负：向上）

　　　　content.shadowOffsetY = 5;

　（４）：设置阴影的颜色　默认是透明

　　　　content.shadowColor = “black";

１１：擦除

（１）：方式一：content.clearRect(x,y,width,height)；

　　参数：x,y:擦书的位置

width,height：擦除的区域大小

　　可以灵活控制擦除区域的大小

（２）：方式二：直接重置canvas元素的宽和高

两种方式的区别：clear方法清除指定区域的内容会保留样式，但重置宽高会清除canvas上所有的内容，不会保留之前设置的样式

１２：保存与恢复：

　　canvas中保存与恢复的行为类似于数据入栈出栈的过程

　（１）：保存的方法：save()；

　　　　保存绘图状态，将图形保存到绘图状态栈里（先进后出），每调用一次save，就会向栈中添加新的状态

　（２）：恢复的方法：restore()；

　　　　恢复绘图的状态，图形一旦出栈，栈中就不在保存该状态

注意：一般情况下save次数 >=　restore次数

canvas画布01相关推荐

HTML5 API详解（12）:canvas画布API提供的内容很丰富啊~
不考虑代码质量的话,一般来说css3>canvas>纯js. 1. css3动画是独立与js线程的,js的运算操作不会阻塞css3的动画,所以在系统cpu占用率较高的时候,css3的动画性 ...
s时钟画布 android,Canvas画布实现自定义时钟效果
标题 *{margin:0; padding:0; list-style:none;} .box{ width: 420px; height: 420px; margin: 50px auto 0; ...
three - 3 - 基础知识（1. three渲染结构，2.对canvas 进行响应式布局，3.让canvas 画布自适应设备分辨率）
本章节分为3点: 理解three.js 的渲染结构对canvas 进行响应式布局让canvas 画布自适应设备分辨率 canvas 画布的css尺寸和像素尺寸 1.three.js 的渲染结构接 ...
从0开始canvas系列一 --- canvas画布
从0开始canvas系列从0开始canvas系列一 - canvas画布从0开始canvas系列二 - 文本和图像从0开始canvas系列三 - 图像像素级操作从0开始canvas系列四 - ...
H5 canvas画布总结（绘制哆啦A梦）
canvas标签只是图形容器定义图形,使用 canvas 绘制路径,盒.圆.字符以及添加图像 1.创建一个画布 <canvas id='cv' width='400px' height='60 ...
js实现图片虚化_js canvas画布实现高斯模糊效果
最近项目中有一个需求是实现图片的局部模糊效果,看上去一个挺难的效果.在实现局部模糊效果前,首先能够实现全部模糊.经过和度娘的一番较劲后,找到了一个不错的案例,然后在他的基础上,经过一番修改,和备注,实 ...
用html5的canvas画布绘制贝塞尔曲线
查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
js将文字填充与canvas画布再转为图片
需求:封装consul服务的webUI: 原因:展示consul的服务信息时,需要嵌套动画,由于其没有内置的icon,所以将服务name放于图片位: 分析:展示信息时采用了卡片式的服务布局,缩放式的服 ...
前端实现可绘制的canvas画布_前端图形学基础（五）——Canvas状态管理
点击右上角的关注,不定期前端干货分享!! 欢迎来到我的前端图形学系列文章: 前端图形学基础(一)--Canvas基础入门前端图形学基础(二)--Canvas基础前端图形学基础(三)--Canvas ...

canvas画布01

canvas画布01相关推荐

最新文章

热门文章