商城建站,iis7 二级目录安装wordpress,网络营销seo优化,免费移动网站模板下载nvas是定义在浏览器上的画布。它不仅仅是一个标签元素更是一个编程工具是一套编程的接口。利用它可以开发出很多东西#xff0c;比如动画#xff0c;游戏#xff0c;动态的图表等富有变现力和感染力的应用。还可以开发出绚丽的3D动态效果。接下来我们一起学习#xff01;一…nvas是定义在浏览器上的画布。它不仅仅是一个标签元素更是一个编程工具是一套编程的接口。利用它可以开发出很多东西比如动画游戏动态的图表等富有变现力和感染力的应用。还可以开发出绚丽的3D动态效果。接下来我们一起学习一、 创建canvas 1 2 3 4 5 6 7 8 canvas基础 9 10 11 12 13 14 15 看一下现在的效果:除了上述代码那样指定canvas的宽高还可以在js中这样指定:1 var canvas document.getElementById(canvas);2 3 canvas.width 700;4 canvas.height 400;这样边框内就是一个画布了接下来我们就可以在这画布里进行绘制了。二 、 画一条线段 1 看一下效果图:三 、 画一个三角形并着色 1 效果图:四 、 绘制两个图形 1 效果图:五 、 绘制一个七巧板 1 效果图:六 、 绘制一段弧 1 context.arc各参数的含义:1 context.arc(2 centerx , //圆心的x轴坐标位置3 centery, //圆心的y轴坐标位置4 radius, //圆弧半径的值5 startingAngle, //以哪个弧度制开始6 endingAngle, //在哪个弧度制结束7 anticlockwisefalse //顺时针方向绘制,为true则逆时针。默认为顺时针。8 )效果图:改为逆时针的话在context.arc里面添加参数truecontext.arc(300, 300, 200, 0, 1.5 * Math.PI,true);效果图:七 、 绘制多段弧 和 着色 1 效果图:可以看出绘制多个弧也是使用beginPath()和closePath()。但是绘制出来的弧自动的把首尾连接起来了成了一个封闭的弧。这是因为closePath()的原因如果想只是展示不封闭的弧只需要把context.closePath()这段代码去掉就行。beginPath()和closePath()并不一定成对出现。填充的时候有closePath()和没有closePath()效果是一样的。
