这个教程介绍了HTML5 Canvas的图形绘制和变换方法，包括正方形、圆形的绘制，路径创建，以及旋转、缩放、平移等变换操作。通过示例代码展示了如何使用canvas元素创建五角星、彩色圆弧、变形图形和图像的局部放大与平铺效果。
function draw(id){
var canvas = document.getElementById(id);
if(canvas == null)
return false;
var context = canvas.getContext('2d') ;//getContext来获取图形上下文。
context.fillStyle = "#EEEEFF"; //指定颜色值 context取得上下文 fillStyle填充的样式
context.fillRect(0,0,400,300); //填充矩形和绘制矩形边框
context.fillStyle = "red" ;//fillStyle填充的样式
context.strokeStyle = "blue"; //strokeStyle图形边框的样式。在该属性中填入边框的颜色值
context.lineWidth=1; //设定图形边框的宽度
context.fillRect(50,50,100,100) ;//填充矩形和绘制矩形边框
context.strokeRect(50,50,100,100); //填充矩形和绘制矩形边框
}
</script>
</head>
<body οnlοad="draw('canvas');">
<h1>canvas元素示例</h1>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
正方形绘制显示如下：
<script>
function draw(id){
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
context.fillStyle = "#EEEEFF";
context.fillRect(0,0,400,300);
var n =0;
for(var i = 0 ;i < 10;i++ ){
context.beginPath(); //开始创建路径。在几次循环中创建路径的过程中，每次开始创建都要调用beginPahth函数
context.arc(i * 25,i * 25,i * 10,0,Math.PI * 2,true);//创建圆形路径括号中分别是：X轴，Y轴,圆形半径，开始角度，结束角度，顺时针执行
context.closePath();//关闭路径
context.fillStyle = 'rgba(255,0,0,0.25)';//设定样式
context.fill();//进行绘图（填充图形）
}
}
</script>
</head>
<body οnlοad="draw('canvas');">
圆形绘制
<h1>canvas圆形示例。想要绘制其他路径，需要使用路径。同样，绘制开始时还是要去的图形上下文，然后执行如下步骤：
1、开始创建路径
2、创建图形的路径
3、路径创建完成后，关闭路径
4、设定绘制样式，调用绘制方法，绘制路径
</h1>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
最低0.47元/天 解锁文章
扫一扫
1498
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
