canvas 绘图总结

来源：互联网发布：js垃圾回收引用计数编辑：程序博客网时间：2024/06/07 11:01

在使用过canvas 一些过后小总结下

总结：由于我以前没有做过绘图 , 所以我在学习的过程中主要难点是绘图的流程问题

基本方法介绍

1 canvas 创建

<canvas id="myCanvas" width="300" height="150">Fallback content, in case the browser does not support Canvas.</canvas>

注意点 canvas 的宽和高只能采用 width 和 height 属性设置 style 样式设置会导致图像失真

2 canvas 网格坐标图

坐标图

3 简单例子

绘图的一些方法和使用方法的绘图流程问题下面的网址都会有介绍

https://developer.mozilla.org/cn/Canvas_tutorial/Drawing_shapes

4 stroke 和 fill

stroke 描边对应着 strokeStyle

fill 填充对应着 fillStyle ( 这边有一个流程问题试想如果你画一个圈但是首尾没有闭合你认为你调用fill 填充还有用吗？ )

5 样式和风格查看

https://developer.mozilla.org/cn/Canvas_tutorial/Applying_styles_and_colors

6 状态的保存和恢复 Saving and restoring state

这两个属性对于你使用canvas 绘图至关重要下面的例子我很喜欢

function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.fillRect(0,0,150,150); // Draw a rectangle with default settings ctx.save(); // Save the default state ctx.fillStyle = '#09F' // Make changes to the settings ctx.fillRect(15,15,120,120); // Draw a rectangle with new settings ctx.save(); // Save the current state ctx.fillStyle = '#FFF' // Make changes to the settings ctx.globalAlpha = 0.5; ctx.fillRect(30,30,90,90); // Draw a rectangle with new settings ctx.restore(); // Restore previous state ctx.fillRect(45,45,60,60); // Draw a rectangle with restored settings ctx.restore(); // Restore original state ctx.fillRect(60,60,30,30); // Draw a rectangle with restored settings} save

描述下

canvas 提供的是一个属性栈栈我想大家都知道的特性是先进后出

save() 会向栈中保存一条元素 restore 会从栈中删除一条元素

而你绘图是采用当前栈的顶层样式绘制的记住这个特性之后样式才能任你控制

兼容IE 和 firefox JS excanvas.js , 说是用来兼容的但是我在使用的过程中发现有些地方还是不能比如文字等

可能是我的水平还不够~