Canvas_1

最新推荐文章于 2025-12-04 18:23:50 发布

原创最新推荐文章于 2025-12-04 18:23:50 发布 · 286 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #canvas #图形

HTML5 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用HTML5的Canvas标签进行图形绘制及图片显示。通过JavaScript控制Canvas，可以绘制矩形、图片等元素，并实现旋转、缩放等功能。

一创建Canvas标签

HTML5元素用于图形的绘制，通过脚本（通常是javascript）来完成
标签只是图形容器，你必须使用脚本来绘制图形
可以通过多种方法使用canvas绘制路径，盒，圆，字符以及添加图像

代码1：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Canvas_1</title>
</head>
<body>
<canvas class="canvas" width="200px" height="200px"></canvas>
</body>
</html>

代码2：

脚本文件创建Canvas

var CANVAS_WIDTH=200,CANVAS_HEIGHT=200;

window.onload=function(){
    createCanvas();
}

function createCanvas(){
    document.body.innerHTML="<canvas id=\"myCanvas\" width=\""+CANVAS_WIDTH+"\" height=\""+CANVAS_HEIGHT+"\"></canvas>";
}

二绘制图形

WEB API接口文档

https://developer.mozilla.org/zh-CN/docs/Web/API

canvas元素本身没有绘图能力的。所有的绘制工作必须在Javascript内部完成。

代码：

var CANVAS_WIDTH=400,CANVAS_HEIGHT=200;
var myCanvas,context;

window.onload=function(){
    createCanvas();
    drawRect();
}

function createCanvas(){
    document.body.innerHTML="<canvas id=\"myCanvas\" width=\""+CANVAS_WIDTH+"\" height=\""+CANVAS_HEIGHT+"\"></canvas>";
    myCanvas=document.getElementById("myCanvas");
    context=myCanvas.getContext("2d");
}

function drawRect(){
    context.fillStyle="#FFFF00";
    //旋转45度
   // context.rotate(45);
    //向右移动20，向下移动20
    context.translate(20,20);
    //宽变为原来的2倍，高为0.5倍
    context.scale(2,0.5)
    context.fillRect(0,0,200,200);
}

三绘制图片

代码：

var CANVAS_WIDTH=400,CANVAS_HEIGHT=200;
var myCanvas,context;

window.onload=function(){
    createCanvas();
    drawImage();
}

function createCanvas(){
    document.body.innerHTML="<canvas id=\"myCanvas\" width=\""+CANVAS_WIDTH+"\" height=\""+CANVAS_HEIGHT+"\"></canvas>";
    myCanvas=document.getElementById("myCanvas");
    context=myCanvas.getContext("2d");
}

function drawImage(){
    var img=new Image();
    img.onload=function(){
        context.drawImage(img,0,0);
    }
    img.src="1.jpg";
}