HTML5 canvas画布（六）

最新推荐文章于 2021-10-27 04:05:19 发布
最新推荐文章于 2021-10-27 04:05:19 发布
阅读量3.7k 收藏 1
点赞数
分类专栏： HTML5 前端开发 HTML5从菜鸟到高手
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/anda0109/article/details/51822135
版权

贝塞尔曲线

贝塞尔曲线的专业介绍请参见：
http://www.cnblogs.com/jay-dong/archive/2012/09/26/2704188.html

下面是canvas绘制贝塞尔曲线的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>canvas绘图</title>
    <script>
    window.onload = function()
    {
        drawCanvas1();
        drawCanvas2();
    }
    function drawCanvas1()
    {
        var canvas=document.getElementById("myCanvas1");
        var context=canvas.getContext("2d");

        context.beginPath();
        context.moveTo(20,20);
        context.quadraticCurveTo(30,100,200,90);
        context.stroke();

        //标注坐标点
        //context.textAlign = "center";
        context.fillStyle = "red";
        context.fillText("开始点(20,20)",20,20);
        context.fillText("控制点(30,100)",30,100);
        context.fillText("结束点(200,90)",200,90);

        //红色辅助线
        context.strokeStyle = "red";
        context.beginPath();
        context.moveTo(20,20);
        context.lineTo(30,100);
        context.lineTo(200,90);
        context.stroke();
    }

    function drawCanvas2()
    {
        var canvas = document.getElementById("myCanvas2");
        var context = canvas.getContext("2d");

        context.beginPath();
        context.moveTo(20,20);
        context.bezierCurveTo(20,100,200,300,200,20);
        context.stroke();

        //标注坐标点
        //context.textAlign = "center";
        context.fillStyle = "red";
        context.fillText("开始点(20,20)",20,20);
        context.fillText("控制点1(20,100)",20,100);
        context.fillText("控制点2(200,300)",200,300);
        context.fillText("结束点(200,20)",200,20);

        //红色辅助线
        context.strokeStyle = "red";
        context.beginPath();
        context.moveTo(20,20);//起始点
        context.lineTo(20,100);//控制点1       
        context.lineTo(200,300);//控制点2
        context.lineTo(200,20);//结束点
        context.stroke();
    }

    </script>
</head>
<body>
    <canvas id="myCanvas1" width="400" height="400" style="border:#F00 solid 1px">
        您的浏览器不支持canvas
    </canvas>
    <canvas id="myCanvas2" width="400" height="400" style="border:#F00 solid 1px">
        您的浏览器不支持canvas
    </canvas>
    <br />
</body>
</html>

效果如下：
这里写图片描述

anda0109
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5 Canvas画布源码
05-16
html5 canvas 做画布，网页工具有画笔、粗细、颜色、橡皮擦、文字方块、上传图片、保存等功能，鼠标模拟手写输入，适合老师在线授课当黑板使用。
HTML5 —— canvas画布
impact_factor的博客
07-22 969
canvas画布 画布：HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 绘制图形的过程 创建画布：使用html5中画布标签 <canvas id="id" width="宽度" height="高度"> </canvas> JavaScript中获取画布 document.getElementById('id')
HTML5画布（canvas）
zg0601的博客
10-27 2695
HTML画布（canvas）的简单介绍以及使用方法，从而达到绘制简单图形。
HTML5 如何创建Canvas画布
ivenqin的博客
06-24 1707
本节我们来学习如何创建 Canvas 画布。 <canvas> 标签是 HTML5 中新增的标签，通过使用 JavaScript 中的脚本来绘制图形。在页面上放置一个 canvas 元素，就相当于在页面上放置了一块画布，canvas 元素拥有多种绘制矩形、圆形、字符、路径以及添加图像的方法。 但是我们并不是使用鼠标在画布中画画的哟，其实 <canvas> 标签本身没有绘制图形的能力，它只是一个图形容器，要想在这个容器中绘制图形，则必须使用 JavaScript 脚本来完成。 创建画布
html5 canvas清空画布方法
热门推荐
idomyway的博客
11-12 7万+
总结以下三种清空canvas画布的方式： 1. 最简单的方法：由于canvas每当高度或宽度被重设时，画布内容就会被清空，因此可以用以下方法清空： [javascript] view plain copy function clearCanvas() {       var c=document.getElementBy
HTML5 Canvas画布
lllllllllaaa的博客
08-27 997
7HTML5 Canvas画布 1、       Canvas:定义画布的大小是style的属性，而定义画布的像素是Canvas的属性 如果设置Style里面的width和height他仅表示canvas元素占文档流的位置，这时候画布的宽度 和高度是默认值，分别是600、300. 注意：设置canvas的宽度的，直接操作canvas的width属性和height属性。如果要放大canvas画
HTML5 Canvas 画布入门教程
10-14
本教程适合H5 Canvas绘图的初学者阅读，丰富的范例能让读者快速掌握H5 Canvas画布的基本使用方法，能创建简单的动画，能检测捕捉鼠标动作。
html5 canvas画布绘制圆形时钟代码
09-08
html5 canvas画布绘制圆形时钟代码
html5 canvas画布随机颜色变化特效
11-06
html5 canvas画布随机颜色变化特效 html5 canvas画布随机颜色变化特效
html5 canvas画布里面圆球弹跳动画效果代码
11-06
html5 canvas画布里面圆球弹跳动画效果代码 html5 canvas画布里面圆球弹跳动画效果代码
微信小程序开发—小程序框架详解（一）
错位竞争，单点突破。
11-17 3万+
下面以开发者工具自动生成的程序框架为例，对小程序的框架进行介绍。选择一个空的项目目录创建一个小程序项目，如下图： 创建完成后我们看到如下目录结构： 目录结构小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下： 文件 必须 作用 app.js 是 小程序逻辑 app.json 是
微信小程序开发—项目实战之聊天机器人
错位竞争，单点突破。
11-30 2万+
我参加CSDN博客之星评选啦，感谢大家前往投票支持！ 投票地址：http://blog.csdn.net/vote/list.html?keyword=anda0109#search 项目功能介绍人工智能虚拟机器人“微软小冰”大家玩过吧，很酷的一个应用。发送文字、语音和图片都能得到智能的回复。那现在我们就用小程序做一个模拟的应用，智能聊天机器人。发送文字它可以回复一段话，或一张图片，是不是有点小
微信小程序开发—快速掌握组件及API的方法
错位竞争，单点突破。
11-19 2万+
微信小程序框架为开发者提供了一系列的组件和API接口。组件主要完成小程序的视图部分，例如文字、图片显示。API主要完成逻辑功能，例如网络请求、数据存储、音视频播放控制，以及微信开放的微信登录、微信支付等功能。组件官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/component/对于开发文档，个人建议先了解其整体框架，了解其提供了哪些组件，再联想到这些组
微信小程序开发—小程序框架详解（二）
错位竞争，单点突破。
11-18 1万+
上一节讲了微信小程序的目录结构及各个文件的作用，主要介绍了小程序的配置文件及其支持的配置属性。本节主要从逻辑层和视图层来说明小程序的框架。小程序的逻辑层由js完成，视图层由微信提供的WXML（WeiXin Mark Language）和WXSS（WeiXin Style Sheet）文件来完成。其中官方给出的解释：页面的脚本逻辑是在JsCore中运行，JsCore是一个没有窗口对象的环境，所以不能在
HTML5浏览器兼容性解决方案
错位竞争，单点突破。
06-18 6678
目前大部分浏览器均支持HTML5。低版本浏览器支持HTML5所有浏览器 ，对无法识别的元素会作为内联元素自动处理。因此可以采用如下方法教会浏览器 处理 “未知” 的 HTML 元素。将 HTML5 元素定义为块元素HTML5 定了 8 个新的 HTML 语义（semantic） 元素。所有这些元素都是 块级 元素。 为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属
HTML5 canvas画布（三）
错位竞争，单点突破。
06-24 5656
本节主要是canvas各种用法的示例，先解决一个我在应用canvas绘图过程中的一个问题，相信大家可能也遇到过。一个奇怪的问题下面代码是在canvas上绘制一个100*100的矩形：<!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas基础练习</title> <style> .myCanvas{
HTML5 canvas画布（一）
错位竞争，单点突破。
06-18 5172
HTML5中canvas元素用于在网页上绘制图形。Canvas的特点 Canvas画布是一个矩形区域，可以控制其每一个像素 Canvas使用JavaScript来控制画图 Canvas具有直线、矩形、圆以及添加图像的方法 Canvas标签的使用下面的代码是使用canvas画面绘制一个200*200红色矩形：<!Doctype html> <html> <head> <title>我的canvas页面
HTML5 canvas画布（四）
错位竞争，单点突破。
06-25 4650
arcTo用法用法：arcTo(x1, y1, x2, y2, radius) 说明：arcTo()方法将利用当前端点、端点1(x1,y1)和端点2(x2,y2)这三个点所形成的夹角，然后绘制一段与夹角的两边相切并且半径为radius的圆上的弧线。弧线的起点就是当前端点所在边与圆的切点，弧线的终点就是端点2(x2,y2)所在边与圆的切点，并且绘制的弧线是两个切点之间长度最短的那个圆弧。此外，如果当
HTML5 canvas画布（二）
错位竞争，单点突破。
06-23 4005
上一篇《HTML5 canvas画布（一）》对canvas标签作了简单的介绍和用法示例，但实际上canvas的用法是非常强大的，很多酷炫的HTML5动画及游戏都是基于canvs来制作的。因此决定继续来两篇canvas相关的博文，巩固canvas的基础。 本篇主要介绍canvas的相关属性和用法。颜色、样式和阴影 属性 描述 fillStyle 设置或返回用于填充绘画的颜色、渐变或模式
html5 canvas画布绘图logo
最新发布
06-28
HTML5 Canvas是一种用于绘制图形的Web API，可以用它来绘制各种形状、线条、文本和图像等。要绘制一个logo，可以先设计好logo的样式和颜色，然后使用Canvas API来实现。具体步骤包括：创建Canvas元素，设置Canvas的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值