canvas教程

canvas基础知识点简介.doc

字号+ 作者:H5之家 来源:H5之家 2018-02-10 09:02 我要评论( )

canvas基础知识点简介,canvas 1 基础概念2 2 创建canvas2 3 方法属性2 4 画一条直线3 4.1 线条的属性3 5 画矩形3 6 画五角星4 7 图形变换5 8 状态保存和恢复6 9

文档介绍:
canvas 1 基础概念 2 2 创建canvas 2 3 方法属性 2 4 画一条直线 3 4.1 线条的属性 3 5 画矩形 3 6 画五角星 4 7 图形变换 5 8 状态保存和恢复 6 9 填充样式 6 9.1 线性渐变 6 9.2 径向渐变 6 9.3 使用图片填充 7 9.4 使用画布canvas进行填充 7 10 线条样式 8 11 曲线的绘制 8 11.1 arc() 8 11.2 arcTo() 9 11.3 画月亮 10 11.3.1 三角函数 10 11.3.2 封装画月亮函数 11 11.4 贝塞尔曲线 Bezier 12 11.4.1 二次贝塞尔曲线 12 11.4.2 三次贝塞尔曲线 13 12 文字渲染基础 13 12.1 font属性 13 12.2 textAlign水平对齐 16 12.3 textBaseline垂直对齐 16 12.4 messureText(string).width文本的度量 16 13 阴影 16 14 global全局 17 14.1 globalAlpha 17 14.2 positeOperation 18 15 剪辑区域clip() 18 基础概念 1. canvas标签 HTML5<canvas>元素用于图形的绘制,通过脚本来完成 <canvas>标签只是图形容器,您必须使用脚本来绘制图形 你可以通过多种方法使用canvas绘制路径、盒、圆、字符以及添加图像 只有标准浏览器支持(IE9以上,谷歌,火狐) canvas不是基于对象的绘制,而是基于状态的绘制 创建canvas html: <canvas id=’canvas’></canvas> JavaScript: var canvas=document.getElementById(‘vanvas’); canvas.width=500; cnavas.height=500; var context=canvas.getContext(‘2d’); 方法属性 canvas.width=500; //画布的宽度 canvas.height=500; //画布的高度 canvas.getContext(‘2d’); //创建绘图的上下文环境 context.lineWidth=5; //线条粗细 context.moveTo(100,100); //起始坐标 context.o(200,200); //划到给定的坐标 context.fillStyle=’yellow’ //定义填充颜色 context.fill(); //开始填充,默认填充黑色 context.strokeStyle=’red’; //定义线条颜色 context.stroke(); //开始绘制,默认绘制灰色(128,128,128) context.beginPath(); //创建新的状态 context.closePath(); // 画一条直线 context.moveTo(100,100) 状态设置 context.o(100,100); context.stroke(); 绘制 线条的属性 lineWidth:线条粗细 lineCap:设置线条端点 butt:平头端点(默认) round:圆头端点 square:方头端点 context.lineCap=”square”; //也可以实现图像封闭无缺口(效果等同closePath()) lineJoin:设置线条连接样式 miter:斜接连接(默认) round:圆角连接 bevel:斜角连接 miterLimit:默认值为10 当lineJoin为miter时才有效,如果线条相接所产生的内角与外角的距离超过10,将以bevel的方式相连接 画矩形 context.rect(x,y,width,height); //定义矩形 context.fillRect(x,y,width,height); //定义并且绘制图形(填充,不能描边) context.strokeRect(x,y,width,height); //定义并且绘制图形(描边,不能填充) 代码: context.rect(100,100,300,300); context.lineWidth=10; context.strokeStyle='red'; context.fillStyle='green'; context.stroke(); context.fill(); 画五角星 正弦:对边除以斜边 余弦:邻边 内容来自淘豆网转载请标明出处.

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 2.用canvas制作一个猜字母的小游戏

    2.用canvas制作一个猜字母的小游戏

    2018-02-09 18:00

  • html5 canvas实现酷炫的小游戏例子

    html5 canvas实现酷炫的小游戏例子

    2018-02-09 13:00

  • 完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题

    完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题

    2018-01-28 17:00

  • 《HTML5 Canvas基础教程(英)霍克著》

    《HTML5 Canvas基础教程(英)霍克著》

    2018-01-28 14:07

网友点评