初始接口

<body>

<canvas id=“canvas”></canvas>

<script>

var canvas = document.getElementById(“canvas”);

var context = canvas.getContext(“2d”);

//使用content进行绘制

</script>

</body>

直线绘制

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<canvas id="canvas" style="border: 1px solid #ddd; margin: 0 auto"></canvas>

<script>

    window.onload = function () {

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

        canvas.width = 1024;

        canvas.height = 768;

        //绘制的接口

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

        //Draw a line

        //意图绘制，状态绘制

        //路径定义的首尾

        context.beginPath();

        context.moveTo(100, 100);//笔尖

        context.lineTo(700, 700);//笔尾

        context.lineTo(100, 700);

        context.lineTo(100, 100);

        context.closePath();

//      context.fillStyle = "rgb(2,100,30)";

//      //填充颜色

//      context.fill();

        //线条的宽度

        context.lineWidth = 5;

        //线条的样式

        context.strokeStyle = "#058";

        //具体绘制

        //笔画

        context.stroke();

        context.beginPath();

        context.moveTo(200, 100);

        context.lineTo(700, 600);

        context.closePath();

        context.strokeStyle = "black";

        context.stroke();

        //canvas是基于状态绘制的

    }

</script>

</body>

</html>

方法

context.beginPath();

context.moveTo();

context.lineTo();

context.closePath();

context.fill();

context.stroke();

属性

context.fillStyle;

context.strokeStyle

context.lineWidth

canvas绘制基础的更多相关文章

  1. 【HTML5】Canvas绘制基础

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  2. 自定义控件之Canvas图形绘制基础练习-青春痘笑脸^_^

    对于自定义控件的意义不言而喻,所以对它的深入研究是很有必要的,前些年写过几篇关于UI效果的学习过程,但是中途比较懒一直就停滞了,而对于实际工作还是面试来说系统深入的了解自定义控件那是很有必要的,所以接 ...

  3. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  4. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  5. H5 canvas绘制出现模糊的问题

    在之前做移动端小游戏幸运转盘.九宫格转盘,使用到了 canvas ,也是第一次在项目中使用 canvas 来实现. 近期测试人员反应 canvas 绘制的内容太模糊,心想着用 canvas 绘制出来的 ...

  6. Android中Canvas绘图基础详解（附源码下载） (转)

    Android中Canvas绘图基础详解(附源码下载) 原文链接  http://blog.csdn.net/iispring/article/details/49770651   AndroidCa ...

  7. HTML5—canvas绘制图形（1）

    1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“ ...

  8. Canvas绘制一个大鱼喂小鱼的游戏

    Canvas是HTML5中的一部分,强大的API足以让我们绘制我们任意想绘制的东西.利用Canvas的基础学习以及JavaScript面向对象的思想绘制一个小游戏,下面是源码地址https://git ...

  9. canvas绘制圆心扇形可组成颜色随机的七色小花

    啊~现在应该还是春天吧.心情一如既往的烦闷呐.最近做了一个canvas的扇形绘制的东西.把它整理出来变成一个适合春天的花朵绘制~沉闷的工作环境已经让我这种有趣的人也变成了无聊鬼怪呢.下次一定想找一个年 ...

随机推荐

  1. Java面试必会知识点

    1.== 和 equals()比较: (1)== 是运算符,equals()是Object中定义的方法: (2)== 比较的是 数值 是否相同,基本类型比较数值,引用类型比较对象地址的数值:且变量类型 ...

  2. 201响应为什么进了AJAX error回调函数

    明明AJAX发送请求成功,但是后端返回的不是200,而是201,结果进了error的回调函数,想这种情况,只需要把“dataType:"json",改成dataType:" ...

  3. 基于 Laravel 5 构建的、支持模块化和多语言的 CMS —— AsgardCMS

    1.简介 AsgardCMS 是基于 Laravel 5 构建的.支持模块化和多语言的CMS. 官网:https://asgardcms.com/ Github:https://github.com/ ...

  4. 量子纠缠2——CHSH不等式

    问题 有Alice和Bob两个人,随机给他们两个数x和y(0或1),然后A和B根据他们得到数(x和y)给两个个数a和b(0或1). 规则如下: 如果输入的x和y都是1,那么,Alice和Bob给出不一 ...

  5. Java的四大基础特性

    Java的四大基础特性 一.抽象 父类为子类提供一些属性和行为,子类根据业务需求实现具体的行为. 抽象类使用abstract进行修饰,子类要实现所有的父类抽象方法否则子类也是抽象类. 二.封装 把对象 ...

  6. centos7无故重启-内核升级

    最近有一台物理服务器,centos7操作系统,无故重启,每天都会发生这种情况: 解决: 升级内核 CentOS 允许使用 ELRepo,这是一个第三方仓库,可以将内核升级到最新版本,使用ELRepo升 ...

  7. 网络爬虫之Selenium模块和Xpath表达式+Lxml解析库的使用

    实际生产环境下,我们一般使用lxml的xpath来解析出我们想要的数据,本篇博客将重点整理Selenium和Xpath表达式,关于CSS选择器,将另外再整理一篇! 一.介绍: selenium最初是一 ...

  8. 模板 - 动态规划 - 概率期望dp

    https://blog.csdn.net/myjs999/article/details/81022546

  9. DFS系列 POJ(自认为的讲解)

    C - Sum It Up POJ1564 题意: 给你一个N,然后给你一堆数The numbers in each list appear in nonincreasing order, and t ...

  10. sql server编写通用脚本自动检查两个不同服务器的新旧数据库的表结构差异

    问题:工作过程中,不管是什么项目,伴随着项目不断升级版本,对应的项目数据库业务版本也不断升级,数据库出现新增表.修改表.删除表.新增字段.修改字段.删除字段等变化,如果人工检查,数据库表和字段比较多的 ...