HTML5 Canvas学习笔记
南太平洋_99
这个作者很懒,什么都没留下…
展开
-
clearRect清除html5画布
html5 canvas 清除可以使用clearRect() 方法clearRect() 方法的作用是清空给定矩形内的指定像素。制作动画 比如说电子钟需要用setInterval刷新时间 要不停的清楚画布。JavaScript 语法:context.clearRect(x,y,width,height);x 要清除的矩形左上角的 x 坐标y 要清除的矩形左上原创 2016-08-02 17:34:11 · 1230 阅读 · 0 评论 -
HTML5 canvas drawImage() 方法
drawImage() 方法在画布上绘制图像、画布或视频。drawImage() 方法也能够绘制图像的某些部分,以及/或者增加或减少图像的尺寸。JavaScript 语法 1在画布上定位图像:context.drawImage(img,x,y);JavaScript 语法 2在画布上定位图像,并规定图像的宽度和高度:context.drawImage原创 2016-08-06 15:33:17 · 828 阅读 · 0 评论 -
canvas beginPath()和closePath()
beginPath 这个canvas函数我很早就讲过了,他的作用很简单,就是开始一段新路径,我们先来看下面的一小段代码:var ctx = document. getElementById ( 'cvs' ) . getContext ( '2d' ) ; ctx. beginPath ( ) ; ctx. moveTo ( 100.5 , 20.5 ) ; ctx. line转载 2016-08-07 18:23:00 · 4427 阅读 · 3 评论 -
canvas a div居中问题
display:block; margin:20px auto;"> margin:20px auto; border:1px #000000 solid;"> margin:20px auto; display:block; width:50px;">123、居中问题canvas居中 display:block margin:20px autoa居中 width:20原创 2016-08-07 21:01:13 · 1176 阅读 · 2 评论 -
canvas中圆的角度和弧度
圆(弧)先看一下参数:ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)画圆或者圆弧。x,y为圆心坐标,radius为半径,startAngle,endAngle为开始/结束划圆的角度,anticlockwise为是否逆时针画圆(True为逆时针,False为顺时针)。注意这里的角度为弧度制,所以如果转载 2016-08-08 11:07:55 · 6579 阅读 · 0 评论 -
canvas图形变换 保存和恢复
在图形学中,一般先画出原形,再通过图像变换得到目的图形Canvas提供的图形变换API:位移:translate(x,y)旋转:rotate(deg) 角度要转换成弧度缩放:scale(se,sy) 不单只放大图形大小,也会放大其他属性!在Canvas的图形变换函数是叠加的,所以:绘制前:context.save()绘制后:context.res原创 2016-08-08 15:44:14 · 644 阅读 · 0 评论 -
canvas isPointInPath()方法 画布交互
canvas isPointInPath()定义和用法如果指定的点位于当前路径中,isPointInPath() 方法返回 true,否则返回 false。JavaScript 语法:context.isPointInPath(x,y);参数值参数描述x要测试的 x 坐标。y要测试的 y 坐标。function changeColor(event){ var event=ev原创 2016-08-09 19:18:06 · 3846 阅读 · 0 评论 -
echarts基本使用
项目中要做图形报表,要求使用echarts实现,以前有用过,不过忘得差不多了,现在重新学学。echarts官网提供了源码和说明文档,使用echarts需要先到官网下载需要的js源文件,如果用到主题和地图,也需要到官网进行下载。可以在使用 webpack 的项目中引入和打包 ECharts1.npm 安装 EChartsnpm install echarts --save原创 2017-06-03 21:03:36 · 1637 阅读 · 3 评论