canvas初步学习

来源：互联网发布：iphone怎么设置网络编辑：程序博客网时间：2024/05/20 05:11
<!DOCTYPE html ><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript" src="jquery-1.5.2.min.js"></script><script>$(document).ready(function(){var canvas=$("#myCanvas");var context=canvas.get(0).getContext("2d");/************填满浏览器******************/canvas.attr("width",$(window).get(0).innerWidth);canvas.attr("height",$(window).get(0).innerHeight);context.fillRect(0,0,canvas.width,canvas.height);/************矩形******************/var x=y=40;//坐标var widthR=heightR=100;//大小context.fillRect(x,y,widthR,heightR);//绘制一个填充矩形context.strokeRect(x+110,y,widthR,heightR);//绘制有边框的矩形/************线条******************/context.beginPath();//开始路径context.lineWidth=5;context.moveTo(40,160);//路径起点context.lineTo(250,260);//路径终点context.closePath();//结束路径context.stroke();//绘出路径轮廓/************圆形******************/context.beginPath();context.fillStyle="red";context.arc(90,300,50,0,Math.PI*2,false);//绘制圆形arc(x,y,radius,startAngel,endAngel,anticlockwise)context.closePath();context.stroke();context.beginPath();context.arc(200,300,50,0,Math.PI,true);//绘制半圆context.closePath();context.fill();/************擦除******************///context.clearRect(40,40,100,100);context.clearRect(90,300,50,50);});</script></head><body><canvas id="myCanvas" width="500" height="500">        </canvas></body></html>