- 浏览: 18381 次
- 性别:
- 来自: 北京
最新评论
canvas是个神奇的标签,开始学习之后就停不下来,这两天一直在慕课网上学习canvas的动画,老师讲的很好,很详细,现在我就简单的总结一下这两天学的内容。
首先对于HTML中的代码很简单:
然后在JavaScript中获取canvas
context非常重要,它用来承载我们所要实现的内容
首先对于HTML中的代码很简单:
<canvas id = "canvas" style = "border:1px solid #eee;display:block;margin:0 auto"></canvas>
然后在JavaScript中获取canvas
window.onload = function () { var canvas = document.getElementById("canvas"); canvas.width = 1200; canvas.height = 795; context = canvas.getContext("2d"); }
context非常重要,它用来承载我们所要实现的内容
//直线 context.strokeStyle = "red";//直线的颜色 context.lineWidth = 3;//直线的宽度 context.beginPath(); context.moveTo(100,100); context.lineTo(800,800); context.closePath(); context.stroke();//绘制直线
//矩形 context.fillStyle = "blue";//矩形的填充颜色 context.strokeStyle = "black";//矩形的边框颜色 context.lineWidth = 3;//矩形边框的宽度 context.beginPath(); context.fillRect(100,100,200,100);//绘制一个起点在100,100位置宽200高100的矩形,矩形填充色为蓝色 context.strokeRect(100,100,200,100);//给矩形绘制宽度为3的黑色边框
//圆形 context.arc(x,y,r,o,f,true);//x:圆心的x坐标,y;圆心的y坐标,r:半径,o圆的起始位置,f:圆的终止位置,true or false:表示顺时针或者逆时针 //圆环 实现圆环是先画两个不一样大小的圆,要保证这两个圆的旋转方向是相反的,然后进行背景色的填充,这是根据非零环绕原则进行的区域填充 //直线渐变 var linearGrad = context.createLinearGradient(0,0,800,700); linearGrad.addColorStop(0.0,"#fff"); linearGrad.addColorStop(1.0,"#000"); context.fillStyle = linearGrad; context.fillRect(0,0,800,700); //径向渐变 var radiaGrad = context2.createRadialGradient(400,400,100,400,400,500); radiaGrad.addColorStop(0,"white"); radiaGrad.addColorStop(0.25,"yellow"); radiaGrad.addColorStop(0.5,"green"); radiaGrad.addColorStop(0.75,"blue"); radiaGrad.addColorStop(1,"black"); context2.fillStyle = radiaGrad; context2.fillRect(0,0,800,800); //图片填充 var img = new Image(); img.src = "1.jpg"; img.onload = function(){ var pattern = context.createPattern(img,"repeat");//repeat,repeat-x,repeat-y,no-repeat context.fillStyle = pattern; context.fillRect(0,0,800,600); } //线条的属性 lineCap="butt"//默认直线两端的样式 ="round" ="square" lineJoin = "miter" "bevel" "round" //曲线的绘制 context.moveTo(x0,y0); context.arcTo(x1,y1,x2,y2,r);//与x0y0到x1y1这条直线和x1y1到x2y2这条直线相切半径为r的曲线 //二次贝塞尔曲线 context.moveTo(x0,y0); context.quadraticCurveTo(x1,y1,x2,y2);//x1,y1为曲线的控制点,x0y0为曲线的起始点,x2y2为曲线的终止点 //三次贝塞尔曲线 context.moveTo(x0,y0); context.bezierCurveTo(x1,y1,x2,y2,x3,y3);//x1y1与x2y2为两个控制点
发表评论
-
css兼容问题
2018-02-26 13:14 3851. 就是 ie6 双倍边距的问题,在使用了 float 的情 ... -
css
2018-02-23 11:06 4171.#nav li {} 看起来很快,实际上很慢,尽管这让人 ... -
web标准
2018-02-22 14:25 384web标准简单来说可以分为结构、表现和行为。其中结构主要是有H ... -
总结一些每次写都要百度的样式 and so on
2016-06-03 14:00 461本次总结无关乎顺序, ... -
js检测css样式的兼容问题
2015-07-24 20:30 835<script> ... -
PHP正则表达式
2015-07-07 14:34 434正则表达式的基本语法 ... -
PHP字符串与数组常用函数
2015-07-07 10:42 1961字符串: 字符串的连接:PHP中用英文的点号.来连接两个字符串 ... -
DOM事件对象event、IE中的事件对象
2015-07-02 16:45 489DOM中的事件对象: type属性用于获取事件类型; targ ... -
跨浏览器事件处理程序
2015-07-02 16:03 470<div id = "box"& ... -
jQuery获取父级元素、同级元素、子元素、过滤
2015-07-01 15:50 484父级元素: <body>body (曾曾祖父) ... -
点击按钮实现轮播切换
2015-06-29 19:13 988HTML: <div class="con3 ... -
jQuery验证邮箱手机
2015-06-29 19:03 503验证邮箱: function checkSignEmail ... -
ios多线程
2014-11-27 14:35 450最近写了一个东西需要加载网络上的图片,运行的时候一直卡到一个界 ... -
取出数组中的值
2014-11-01 21:08 306在写程序的时候,遇到一个问题,想把数组[a,b]中的a,b添加 ... -
解析json获取数据
2014-11-01 20:57 387NSError *error; NSURLReq ... -
cell重用问题
2014-11-01 20:44 559解决问题之前,在cell上添加了label,但是给label添 ... -
保存并获取数据
2014-09-27 19:38 298在IOS开发过程中,经常会遇到数据保存的问题,现在主要说一下用 ... -
UINavigationController实现页面跳转
2014-09-19 20:31 774总结一下利用navigationController push ... -
tableviewcell添加label、button
2014-09-13 22:02 15901.给tableviewcell添加label,首先 CG ... -
简单表视图并实现添加数据
2014-09-10 19:21 13161.基础:表用于显示数据列表。数据列表中的每项都由行表示。表视 ...
相关推荐
画布Canvas基础知识讲解
HTML5 Canvas基础教程内容简介:《HTML5 Canvas基础教程》从HTML5和Javascript(以及jQuery)的基础知识讲起,全面介绍了HTML5 Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态,...
《HTML 5 Canvas基础教程》从HTML5和JavaScript(以及jQuery)的基础知识讲起,全面介绍了HTML5Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态,以及变形、合成、处理图像和视频等,让...
《HTML5 Canvas基础教程》从HTML5和JavaScript(以及jQuery)的基础知识讲起,全面介绍了HTML5 Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态,以及变形、合成、处理图像和视频等,让...
3.4_在画布中心缩放图像|Canvas图像基础|Canvas图形、动画、游戏开发从入门到精通全系列课程
canvasTable是用canvas画布画柱状图、饼图、折线图1、折线图2、贝塞尔曲线
canvas-demo ...canvas的基础用法大家可以去查看文档,相信会看文档的人都会用了。以下列出了常用的几个api。 // ctx为canvas上下文对象 ctx.beginPath() // 开始一个路径 ctx.moveTo(x,y) // 路径移
HTML5-canvas 工作画布基础知识
《HTML5 Canvas基础教程》从HTML5和JavaScript(以及jQuery)的基础知识讲起,全面介绍了HTML5 Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态,以及变形、合成、处理图像和视频等,让...
本书是Canvas的畅销图书,它在上一版的基础上,通过讲解如何开发可交互式多媒体应用,引导读者学习HTML5 Canvas。通过本书,你将学到如何使用Canvas进行绘图、渲染文字、处理图像、创建动画,而这些是开发交互式Web...
< canvas> 元素创造了一个固定大小的画布,其上的渲染上下文CanvasRenderContext2D,可以用来绘制和处理要展示的内容。 若要在canvas上绘图,首先得获取CanvasRenderContext2D2d渲染上下文。(此处指2d的,
canvas绘制基础图形(canvas 气泡框 网格线 三角形 圆角矩形 箭头)1.初始化画布 initCanvas * 2.绘制网格线 drawGridlines * 3.绘制圆点 drawDot * 4.绘制圆环 drawRing
经过和度娘的一番较劲后,找到了一个不错的案例,然后在他的基础上,经过一番修改,和备注,实现了当前的案例: <!doctype html> <html lang=zh> <head> <meta charset=UTF-8> <meta ...
在一些项目业务中,经常会使用到画板,让用户自己去写/画一些东西做标示,比如说在线签电子合约、签名等,如果不用插件,那么如何使用h5的canvas画布来实现这一需求呢? 【本篇只讨论移动端,PC端请看上篇】 ...
这是一个可以利用OpenGL硬件加速的画布控件,使用最基础的OpenGL支持(Delphi 此单元,有如下特性: 1. 硬件加速,绘图速度远远胜过GDI与GDIP。 2. 支持抗锯齿,输出图像质量较高。 3. 支持类似GDIP的坐标变换,...
canvas绘制基础图形(canvas 网格线 三角形 圆角矩形 箭头)的插件,包含初始化画布、绘制网格线 、绘制圆点、绘制圆环 、绘制图片等
如果提供作为第二个参数,则分配给定类型的新类型数组,以用作基础数据的ndarray。 安装 $ npm install ndarray-from-canvas 用法 var ndarrayFromCanvas = require ( 'ndarray-from-canvas' ) ; var canvas = ...
canvas基础教程案例笔记 Canvas: 这是画布标签。 ctx: 画笔 在JS中通过元素.getContext("2d") 获取画笔 坐标系: 普通元素有一个定位坐标系 canvas的坐标系叫做绘图坐标系。 ctx可以认为就是坐标系。 坐标系的原点...
我们甚至可以在 IE 中使用 <canvas> 标记,并在 IE 的 VML 支持的基础上用开源的 JavaScript 代码(由 Google 发起)来构建兼容性的画布。 参见: 目前<canvas> 已经成为 HTML 5 中一个正式的标签。