【HTML5】canvas画布练习

第一步：获取画布元素

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

第二步：绘制

1.正方形

function drawSquare(canvas, context) {

        var width = Math.floor(Math.random() * 64);

        var x = Math.floor(Math.random() * (canvas.width-width));

        var y = Math.floor(Math.random() * (canvas.height-width));

        context.fillStyle = "lightblue";

        console.log(x);

        console.log(y);

        console.log(width);

        context.fillRect(x, y, width, width);

    }

2.圆形

function drawSquare(canvas, context) {

        var width = Math.floor(Math.random() * 64);

        var x = Math.floor(Math.random() * (canvas.width-width));

        var y = Math.floor(Math.random() * (canvas.height-width));

        context.fillStyle = "lightblue";

        console.log(x);

        console.log(y);

        console.log(width);

        context.fillRect(x, y, width, width);

    }

3.文字

function drawText(canvas, context) {

        var selectObj = document.getElementById("foregroundColor");

        var index = selectObj.selectedIndex;

        var fgColor = selectObj[index].value;

        var fontSize = "24";

        context.fillStyle = fgColor;

        context.font = "bold " + fontSize + "px sans-serif";

        context.textAlign = "center";

        var message = document.getElementById("message").value;

        var x = Math.floor(canvas.width / 2);

        var y = Math.floor(canvas.height / 2 - fontSize / 2);

        context.fillText(message, x, y);

    }

备注：context.textAlign是设置 fillText() 中 x 坐标指定的是文本哪个部位的坐标，如果设置为 center， x 就是文本中间的 x 坐标。

4.将画布内容变为图片

function makeImage() {

        var canvas = document.getElementById("myCanvas");

        canvas.onclick = function() {

            window.location = canvas.toDataURL("image/png");

        }

    }

这部分功能浏览器支持得不够好。

完整代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <style>

        *{

            -moz-box-sizing: border-box;

            box-sizing: border-box;

            margin: 0;

            padding: 0;

        }

        main {

            width: 640px;

            height: 320px;

            margin: 32px auto;

            text-align: center;

        }

        canvas {

            border: 1px solid #ccc;

        }

        form section {

            margin-bottom: 16px;

        }

    </style>

</head>

<body>

<main>

    <canvas width="640" height="320" id="myCanvas"></canvas>

    <form>

        <section>

            <label for="backgroundColor">Select background :</label>

            <select id="backgroundColor">

                <option value="white" selected>White</option>

                <option value="black">Black</option>

            </select>

        </section>

        <section>

            <label for="foregroundColor">Select ForegroundColor:</label>

            <select id="foregroundColor">

                <option value="white">White</option>

                <option value="black" selected>Black</option>

            </select>

        </section>

        <section>

            <label for="shape">Select shape:</label>

            <select id="shape">

                <option value="circles" selected>Circles</option>

                <option value="squares">Squares</option>

            </select>

        </section>

        <section>

            <label for="message">Input text:</label>

            <input type="text" name="message" id="message" maxlength="48">

        </section>

        <input type="button" value="preview" id="previewButton" onclick="draw(canvas, context);">

    </form>

</main>

<script>

    var canvas = document.getElementById("myCanvas");

    var context = canvas.getContext("2d");

    function drawSquare(canvas, context) {

        var width = Math.floor(Math.random() * 64);

        var x = Math.floor(Math.random() * (canvas.width-width));

        var y = Math.floor(Math.random() * (canvas.height-width));

        context.fillStyle = "lightblue";

        console.log(x);

        console.log(y);

        console.log(width);

        context.fillRect(x, y, width, width);

    }

    function drawCircle(canvas, context) {

        var radius = Math.floor(Math.random() * 48);

        var x = Math.floor(Math.random() * canvas.width);

        var y = Math.floor(Math.random() * canvas.height);

        context.beginPath();

        context.arc(x, y, radius, 0, Math.PI * 2, true);

        context.fillStyle = "lightblue";

        context.fill();

    }

    function drawText(canvas, context) {

        var selectObj = document.getElementById("foregroundColor");

        var index = selectObj.selectedIndex;

        var fgColor = selectObj[index].value;

        var fontSize = "24";

        context.fillStyle = fgColor;

        context.font = "bold " + fontSize + "px sans-serif";

        context.textAlign = "center";

        var message = document.getElementById("message").value;

        var x = Math.floor(canvas.width / 2);

        var y = Math.floor(canvas.height / 2 - fontSize / 2);

        context.fillText(message, x, y);

    }

    function makeImage() {

        var canvas = document.getElementById("myCanvas");

        canvas.onclick = function() {

            window.location = canvas.toDataURL("image/png");

        }

    }

    function draw(canvas, context) {

        drawText(canvas, context);

        makeImage();

    }

</script>

</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
*{
            -moz-box-sizing: border-box;
box-sizing: border-box;
margin: ;
padding: ;
}
        main {
            width: px;
height: px;
margin: px auto;
text-align: center;
}
        canvas {
            border: px solid #ccc;
}
        form section {
            margin-bottom: px;
}
    </style>
</head>
<body>
<main>
    <canvas width="640" height="320" id="myCanvas"></canvas>
    <form>
        <section>
            <label for="backgroundColor">Select background :</label>
            <select id="backgroundColor">
                <option value="white" selected>White</option>
                <option value="black">Black</option>
            </select>
        </section>
        <section>
            <label for="foregroundColor">Select ForegroundColor:</label>
            <select id="foregroundColor">
                <option value="white">White</option>
                <option value="black" selected>Black</option>
            </select>
        </section>
        <section>
            <label for="shape">Select shape:</label>
            <select id="shape">
                <option value="circles" selected>Circles</option>
                <option value="squares">Squares</option>
            </select>
        </section>
        <section>
            <label for="message">Input text:</label>
            <input type="text" name="message" id="message" maxlength="48">
        </section>
        <input type="button" value="preview" id="previewButton" onclick="draw(canvas, context);">
    </form>
</main>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
function drawSquare(canvas, context) {
        var width = Math.floor(Math.random() * );

var x = Math.floor(Math.random() * (canvas.width-width));
var y = Math.floor(Math.random() * (canvas.height-width));

context.fillStyle = "lightblue";
console.log(x);
console.log(y);
console.log(width);
context.fillRect(x, y, width, width);
}
    function drawCircle(canvas, context) {
        var radius = Math.floor(Math.random() * );

var x = Math.floor(Math.random() * canvas.width);
var y = Math.floor(Math.random() * canvas.height);

context.beginPath();
context.arc(x, y, radius, , Math.PI * , true);
context.fillStyle = "lightblue";
context.fill();
}
    function drawText(canvas, context) {
        var selectObj = document.getElementById("foregroundColor");
var index = selectObj.selectedIndex;
var fgColor = selectObj[index].value;
var fontSize = "24";

context.fillStyle = fgColor;
context.font = "bold " + fontSize + "px sans-serif";
context.textAlign = "center";

var message = document.getElementById("message").value;
var x = Math.floor(canvas.width / );
var y = Math.floor(canvas.height / 2 - fontSize / );
context.fillText(message, x, y);
}
    function makeImage() {
        var canvas = document.getElementById("myCanvas");
canvas.onclick = function() {
            window.location = canvas.toDataURL("image/png");
}
    }
    function draw(canvas, context) {
        drawText(canvas, context);
makeImage();
}
</script>
</body>
</html>

【HTML5】canvas画布练习的更多相关文章

html5——canvas画布
一.基本介绍 1,canvas是画布,可以描画线条,图片等,现代的浏览器大部分都支持. canvas的width,height默认为300*150,要指定画布大小,不能用css样式的widh,heig ...
html5 canvas画布上合成
source-over 默认.在目标图像上显示源图像. source-atop 在目标图像顶部显示源图像.源图像位于目标图像之外的部分是不可见的. source-in 在目标图像中显示源图像.只有目标 ...
HTML5 Canvas 画布
一.Canvas是什么? canvas,是一个画布,canvas元素用于在网页上绘制图形. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. 二.创建Canvas元素加上基本的属 ...
HTML5 canvas画布写炫彩动态的倒计时效果
html代码如下,插入了2个js代码. <!DOCTYPE html> <html> <head> <title>canvas</title> ...
css总结19:HTML5 Canvas(画布)
1 <canvas> 标签定义图形,比如图表和其他图像. 例1:简单使用: <canvas id="Canva" width="200" h ...
Particles.js基于Canvas画布创建粒子原子颗粒效果
文章目录使用方法自定义参数相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...
16个富有创意的HTML5 Canvas动画特效集合
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
html5 canvas 画图移动端出现锯齿毛边的解决方法
使用HTML5的canvas元素画出来的.在移动端手机上测试都发现画图有一点锯齿问题出现这个问题的原因应该是手机的宽是720像素的, 而这个canvas是按照小于720像素画出来的, 所以在720像 ...
16个非常有趣的HTML5 Canvas动画特效集合
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
HTML5 中的 canvas 画布（一）
---恢复内容开始--- 在HTML5中新添加的元素,canvas 现在支持 IE9+的版本注意:HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript ...

随机推荐

【PCB】扫盲总结
1.PCB是什么 PCB( Printed Circuit Board),中文名称为印制电路板,又称印刷线路板,是重要的电子部件,是电子元器件的支撑体,是电子元器件电气连接的载体.由于它是采用电子印刷 ...
4种必须知道的Android屏幕自适应解决方案
文章来源:http://blog.csdn.net/shimiso/article/details/19166167 demo下载:http://www.eoeandroid.com/forum.ph ...
极光推送Jpush(v3)服务端PHP版本集成（V3版本只调用推送API）
因为版本升级,极光推送的API也有了V3,功能也更丰富了,但是对于我们有的用户来说,我们还是只需要调用推送的API就够了. 下载了一份PHP服务端的SDK(下载地址:http://docs.jpush ...
MVC是什么？
MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑.数据.界面显示分离的方法组织代码 ...
制造行业流程管理的“IPO”思维
流程管理是企业从流程角度出发,关注流程是否增值的一套管理体系.从认识流程.到建立流程.到管理流程.再到优化流程,企业管理人员要去除不增值和低价值的流程,减少员工犯错误的机会,建立一套卓越的流程体系. ...
POJ 1061
题意: 两只青蛙在同一条纬度上,它们各自朝西跳,问它们要跳多少步才能碰面(必须同时到达同一点). 分析: 假设它们跳了t步才相遇,青蛙a初始坐标为x,青蛙b初始坐标为y,则跳了t步相遇后a的坐标为 x ...
RTTI
RTTI(Run-Time Type Identification,通过运行时类型识别)程序能够使用基类的指针或引用来检查这些指针或引用所指的对象的实际派生类型. 编辑本段RTTI介绍 RTTI提 ...
Java特性-HashMap
想分享一个对HashMap的理解: 我们首先要知道一个HashMap对象的构成,一般的理解是:一个Map里面放了很多个键值对,合在一起就是一个键值对的数组: 大概这么理解没问题,可是有一点要说明一下, ...
Javascript DOM编程艺术语法部分
1.变量,可以变化的东西我们称为变量,随着年龄的增大,我们的age不断变大 2.Javascript变量声明用var,可以不声明变量类型.尽量声明为一个字符串字面量. 3.弱类型:要求程序员必须明确的 ...
vim自动补全功能
1.首先下载一个插件:ctags 输入:sudo apt-get install ctags 2.Ctrl+n进行单词的自动补全

【HTML5】canvas画布练习

【HTML5】canvas画布练习的更多相关文章

随机推荐

热门专题