-
制作动画最简单的架构查看全部
-
绘制数字查看全部
-
初始化0的位置查看全部
-
js初始化canvas查看全部
-
context.clearRect(0,0,300,300);查看全部
-
context.beginPath(); context.closePath(); context.arc(300,300,200,0,1.5*Math.PI)查看全部
-
context.fillStyle = '#fff'; context.fill();查看全部
-
context.lineWidth = '2px'; context.strokeStyle = '#ccc';查看全部
-
context.stroke();查看全部
-
context = canvas.getContext('2d');查看全部
-
canvas所有绘制是基于状态的。先设定状态值，再绘制。查看全部
-
画圆 context.arc( centerx,centery,radius//圆心的坐标以及半径 startingAngle, endingAngle,开始于哪个弧度，结束于哪个弧度 anticlockwise = false;//false表示以顺时针绘制弧线,true表示逆时针绘制元 ); startingAngle的位置为元右边的位置0,0.5π在元下边，1π在左边，1.5π在上边，2π和0重合 context.closePath();会自动把不封闭的图形首尾连接起来查看全部
-
画直线 //状态设置 context.moveTo(100,100);//直线起始位置 context.lineTo(700,700);//直线终点位置 //可以设置多个lineTo,如果最终的位置和起点位置一样就可以形成封闭图形 context.lineWidth = 5;//设置直线宽度 context.strokeStyle = "#234228";//设置直线颜色 //画 context.stroke();//绘制线条 填充颜色 context.fillStyle = "red";//设置填充颜色 context.fill();//填充颜色 绘制多个图形，由于canvas是基于状态的，再绘制多个图形时使用如下方法进行区分路径 context.beginPath(); context.closePath();查看全部
-
如果不给canvas指定大小，canvas默认是300px宽，150px高。是行内元素 不要使用CSS给canvas指定其大小，通常使用width或者height属性指定其大小 书写流程 1.<canvas id="canvas"></canvas>//若浏览器不支持canvas可以在标签之间写上此浏览器不支持canvas 也可以通过context是否为null来判断浏览器是否支持canvas 2.在js中使用 var canvas = document.getElementById("canvas"); //也可以在js中通过如下的方法指定canvas的大小 canvas.width = 1024; canvas.height = 768; var context = canvas.getContext("2d"); //得到canvas的上下文环境 3.使用context进行绘制查看全部
-
如果不设置canvas样式，默认是300px宽，150px高，默认是行内元素查看全部
举报
0/150
提交
取消