- 博客(13)
- 资源 (9)
- 收藏
- 关注
RSS订阅原创 Canvas的旋转操作（十三）
旋转函数 context.rotate(x)参数x为旋转度，比如旋转45度，则x=Math.PI/4,使用弧度旋转制，注意，这里是以Canvas的原点为旋转点的！！！下面我们就来试一下这个函数，我们想画一个中心点在（200,200），长宽均为100的正方形顺时针旋转45度的图形；代码如下<!DOCTYPE html> <!-- 告诉浏览器我们使用的...
2018-12-26 16:32:19
1045
原创 Canvas的缩放操作（十二）
缩放就是放大或减小。 缩放函数context.scale(x,y)参数x，y表示移动的x轴和y轴上的缩放比例，切记是轴变大先来看代码：<!DOCTYPE html> <!-- 告诉浏览器我们使用的HTML模板为HTML5 --><html lang="en"> <!-- 网页页面的根，其他元素均放在其中，只能有一个 ...
2018-12-26 16:00:23
4891
原创 Canvas的平移操作（十一）
平移就是将2D渲染上下文的原点从一个位置移到一个位置！不要以为你懂上面句话！！！上面这句话的原点注意一下，我们在最初的时候定义左上角为Canvas的原点，现在我们所谓的平移操作是移动了原点的位置，也就是整个画布移动了，现在原点位置相对左上角已经改变了，但是原点坐标还是（0,0）。还是不懂的话，看下面就会懂得！！平移函数 context.translate(x,y)参数x，y表示移动的...
2018-12-13 09:22:38
1790
原创 Canvas绘图状态的保存和恢复（十）
首先，什么是状态，画布上的路径和位图并不属于状态，应该把状态看做2D渲染上下文属性的描述；是不是很难理解！！！那就别理解了，看以下的例子你能基本理解这个意思！！！1、保存绘图状态函数 context.save();保存当前画布状态代码使用： context.fillStyle = "#123123";context.save();//保持画布状态context.fi...
2018-12-11 15:00:12
2851
原创 Canvas填满浏览器窗口操作（九）
首先如何画一个铺满浏览器的canvas，有人会想这样context.fillRect(0,0,100%,100%);然而很不幸，这是无效的！那怎么来呢？？使用以下函数，在加上上一篇已经说了canvas.attr可以重置Canvas的高和宽， $(window).get(0).innerWidth$(window).get(0).innerHeight这2个是返回浏览器的宽和高...
2018-12-09 13:05:54
1662
原创 Canvas的擦除操作（八）
Canvas的擦除主要用于你画错了，可以重新擦掉，或者清除。 擦除函数context.clearRect(x,y，width，height)参数x，y表示擦除的远点坐标，width表示擦除矩形的宽，height则表示高现在画个圆，然后把圆的下半部分擦掉，代码如下：<!DOCTYPE html><html lang="en"><head...
2018-12-09 12:16:46
2363
原创 Canvas绘制文本（七）
canvas的文本是以图形形式绘制的，实际他不是文本，只是像文本而已；一旦绘制之后，无法编辑，除非擦除文字，重新绘制。没有充分的理由，最好使用普通的HTML元素，否则一定不要在canvas中创建文本。 context.fillText(text,x,y);参数x,y表示文字原点（文字左下角位置）参数text就是文本内容 此为填充字context.strokeText(text,x...
2018-12-08 16:25:23
838
原创 canvas绘制圆形（六）
首先圆形也是路径，所以也需要开始和结束和填充开始 结束 填充代码context.beginPath();<!-- 画圆函数-->context.closePath();context.fill();画圆函数context.arc(x,y,radius,starAngle,endAngle,anticlockwise);参数x,y表示圆心坐标；参数start...
2018-12-08 16:05:11
824
5
原创 canvas绘制线条（五）
画线条：绘制线条，其实是绘制路径！一条线段，需要一个起始点和一个终点，由此需要一个设置起始点的函数和一个设置终点的函数函数如下 context.moveTo(x,y)参数x,y表示起始位置坐标context.lineTo(x,y)参数x，y表示终点位置坐标光写这2个没用，至于为什么，不要问，这是规定，你需要在开始画前，调用开始函数context.beginPat...
2018-12-08 13:15:55
918
原创 Canvas绘制矩形（四）
函数定义：context.fillRect(x,y,width,height)参数x,y表示矩形的左上角位置，参数width，height表示矩形的宽和高，并填充矩形；context.strokeRect(x,y,width,height)参数x,y表示矩形的左上角位置，参数width，height表示矩形的宽和高，并勾勒矩形；代码如下：<!DOCTYPE htm...
2018-12-07 21:37:15
1068
原创 2D渲染上下文的访问（三）
第一步必须在body中创建一个canvas元素，这个很简单，主要在创建的时候可用属性width和height设置大小，默认为300,150代码如下（宽500 高500）；id必须命名；<body> <!-- 页面的主题内容均在这里 --> <canvas width="500" height="500" id="mycanvas">&
2018-12-07 17:00:10
898
原创 Canvas开发前的JavaScript准备（二）
何为JavaScript？这里不会详细介绍，因为这也是一门很有学问东西，这里主要讲Canvas，你只要知道它是一种脚本执行语言就可以了，浏览器解释就可以运行，那我们为什么要用他呢？因为Canvas只是个页面标签，Canves的绘画并不是在Canves上执行的，而是在一个叫2D渲染上下文API上执行的，这个API接口就在JavaScript中，相当于我们只要调用封装好的函数接口，传递需要的参数就会在...
2018-12-05 19:50:04
863
原创 Canvas开发前的小准备（一）
1、HTML5页面结构分析<!DOCTYPE html> <!-- 告诉浏览器我们使用的HTML模板为HTML5 --><html lang="en"> <!-- 网页页面的根，其他元素均放在其中，只能有一个 --><head> <!--页面所有meta元素均包含在这里 --> &l
2018-12-05 19:13:12
850
基于Renesas芯片的TH06C温湿度的嵌入式开发pdf_V1.0.zip
2020-03-04
LIN项目代码 .rar
2020-02-22
AP4_for_RL78_EC__V10500.exe
2020-01-15
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人