Canvas_1

最新推荐文章于 2024-07-19 23:42:48 发布

AndyJson

最新推荐文章于 2024-07-19 23:42:48 发布

阅读量222

点赞数

分类专栏： HTML5 文章标签： html5 canvas 图形

本文链接：https://blog.csdn.net/AndyJson/article/details/51840979

版权

HTML5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一创建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";
}

AndyJson

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Canvas_1

一创建Canvas标签HTML5元素用于图形的绘制，通过脚本（通常是javascript）来完成标签只是图形容器，你必须使用脚本来绘制图形可以通过多种方法使用canvas绘制路径，盒，圆，字符以及添加图像代码1：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>Canvas_1</ti
复制链接

扫一扫

专栏目录